bootstrap怎么用

這篇文章給大家分享的是有關bootstrap怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

成都創新互聯于2013年成立，先為平湖等服務建站，平湖等地企業，進行企業商務咨詢服務。為平湖企業網站制作PC+手機+微官網三網同步一站式服務解決您的所有建站問題。

一、起步

1.引用

通過官網下載，或者通過bootcdn提供的CDN服務，又或通過cdnjs提供的CDN服務引用一下文檔

bootstrap.min.css 
bootstrap.min.js

在引用bootstrap.min.js之前需要引用jquery

jquery.min.js

CDN服務

https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js

引用我們文檔的時候，建議寫在body標簽內容的最下面

…
<bdoy>
…
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
</body>
…

2.移動優先

為了確保適當的繪制和觸屏縮放，需要在 <head> 之中添加 viewport 元數據標簽。

   <meta name="viewport" content="width=device-width, initial-scale=1">

在移動設備瀏覽器上，通過為視口（viewport）設置 meta 屬性為 user-scalable=no 可以禁用其縮放（zooming）功能。

   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

如果想弄明白以上代碼的具體內容，想完全搞懂移動像素的問題。推薦去慕課網看一下WEB移動的課程

二、CSS排版布局

1.布局容器

內容容器，寬度進行了固定（左右有間距）

<div class="container"></div>

內容容器，寬度為100%

<div class="container-fluid"></div>

2.柵格系統

柵格化系統，將屏幕寬平均分成了12份，div占多少份，就在class里面寫什么數字

比如

 class="col-md-12"

針對于不同的屏幕大小，分成了四大類，分別是：

.col-lg-大屏幕             >1200px
.col-md-中等屏幕       992px~1200px
.col-sm-小屏幕         750px~992px
.col-xs-超小屏幕             <750px

html:

   <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6 col-sm-12">好好學習天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好學習天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好學習天天向上</div>
            <div class="col-lg-3 col-md-6 col-sm-12">好好學習天天向上</div>
            
        </div>
    </div>

css:

<style>
div[class^="col"]{
outline-offset: 1px;
outline:1px solid red;
}
</style>

3.排版-標題

<mark></mark>    標記標簽
<small></small>   小文本標簽/副標題標簽

4.排版-代碼

   <kbd></kbd>  標記通過鍵盤輸入的內容
    <code></code>  標記代碼內容

5.表格

在傳統的<b>table>tr>td</b>的基礎上添加類名即可使用bootstrap提供的表格特效

基礎表格：

 <table class="table"></table>

在<b>.table</b>的基礎上，再增添以下下類名，可增加相應的效果

.table-bordered   帶邊框的
.table-striped    帶條紋的
.table-hover 鼠標懸停
.table-condensed 緊縮表格  單元格內的padding值減半

狀態類通過這些狀態類可以為行或單元格設置顏色

.active 鼠標懸停在行或單元格上時所設置的顏色.success 標識成功或積極的動作.info 標識普通的提示信息或動作.warning 標識警告或需要用戶注意.danger 標識危險或潛在的帶來負面影響的動作

6.情景顏色（文本，按鈕，背景等等）

顏色在之后的學習中很多地方都會用到

     -default;  默認
      -primary;  首選項
      -success;  成功（一般用于表達積極向上）
      -info;     信息
      -warning;  警告
      -danger;   危險

7.按鈕

通常我們用input或者button標簽寫表單按鈕，也會用a標簽仿寫按鈕。

       <a class="btn btn-danger" href="">百度一下</a>
        <input class="btn btn-danger" type="button" value="按鈕2">
        <button class="btn btn-danger">按鈕3</button>

按鈕有以下幾種皮膚，或者說是主題，又或者簡單稱之為顏色吧：

 btn-default;  默認
  btn-primary;  首選項
  btn-success;  成功（一般用于表達積極向上）
  btn-info;  b   信息
  btn-warning;  警告
  btn-danger;   危險
  btn-link;     連接（a標簽的方式）

8.三角符號

通過使用三角符號可以指示某個元素具有下拉菜單的功能。注意，向上彈出式菜單中的三角符號是反方向的。

<span class="caret"></span>

9.關閉按鈕

通過使用一個象征關閉的圖標，可以讓模態框和警告框消失。

  <button type="button" class="close" >
       <span>×</span>
    </button>

感謝各位的閱讀！關于bootstrap怎么用就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

當前文章：bootstrap怎么用
本文鏈接：http://vcdvsql.cn/article46/pdsphg.html

成都網站建設公司_創新互聯，為您提供定制開發、關鍵詞優化、做網站、品牌網站制作、建站公司、服務器托管

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

bootstrap怎么用