bootstrap教程

一、柵格系統(tǒng)
1、容器：包含兩種容器，

• 流體容器：container-fluid，寬度始終為100%( 但是兩邊有padding )
• container：固定寬度的容器，有固定、1170、970、750、auto等選項(xiàng)，
• 屏幕寬度<768，container寬度auto
• 屏幕寬度768~992，container寬度750
• 屏幕寬度992~1200，container寬度970
• 屏幕寬度>1200，container寬度1170

2、數(shù)據(jù)行(.row)必須包含在容器中，在行(.row)中可以添加列(.column)，但列數(shù)之和不能超過平分的總列數(shù)12，具體內(nèi)容應(yīng)當(dāng)放置在列容器（.column）之內(nèi)，而且只有列（.column）才可以作為行容器(.row)的直接子元素
col-lg-、col-md-、col-sm-、col-xs-

<div class="row">
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 item1">
                col
                <p><img width="100%" src="src/img/b.jpg" alt=""></p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 item2">
                col
                <p><img width="100%" src="src/img/b.jpg" alt=""></p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 item3">
                col
                <p><img width="100%" src="src/img/b.jpg" alt=""></p>
        </div>
        <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 item4">
                col
                <p><img width="100%" src="src/img/b.jpg" alt=""></p>
        </div>
</div>

每個(gè)類名，都代表在該屏幕大小下才起作用

<div class="col-lg-6">
        col
        <p><img width="100%" src="src/img/b.jpg" alt=""></p>
</div>
<div class="col-lg-6">
        col
        <p><img width="100%" src="src/img/b.jpg" alt=""></p>
</div>
//只有在大屏幕下，才會(huì)排成一行，其他屏幕下，就當(dāng)做col-lg-6這個(gè)類名沒有生效，因?yàn)槭莇iv，獨(dú)占一行，所以肯定就排2行了

滿足條件的時(shí)候，每個(gè)div永遠(yuǎn)都是水平排列的，如果不滿足條件了，就代表類名沒有生效，因?yàn)槭莇iv，獨(dú)占一行，所以肯定就依次往下排了
理解：每個(gè)div，上面的數(shù)值是幾，就代表其占據(jù)了多少的空間，比如
.item1的div，
col-lg-3：在大屏幕，占據(jù)3塊，即屏幕的四分之一
col-md-6：在中等屏幕，占據(jù)6塊，即屏幕的二分之一
col-sm-12，col-xs-12：在小或超小屏幕，占據(jù)12塊，即占據(jù)一整個(gè)屏幕，在這種屏幕下，其他的都得往下面排

3、
列偏移：只能往右偏
col-*-offset-n：div向左偏移n個(gè)網(wǎng)格單位，（1<= n <=12）

列排序：push往右偏，pull往左偏

<div class="col-lg-2 col-lg-push-10">col-lg-2</div>
<div class="col-lg-10 col-lg-pull-2">col-lg-10</div>

加上push、pull，效果相當(dāng)于二者換了個(gè)位置

4、row可以嵌套，子級(jí)就以父級(jí)寬度為總寬度，然后再以12個(gè)網(wǎng)格平均分配

5、遇到網(wǎng)格高度不一樣，排列不均勻，可以在需要的地方清除浮動(dòng)：

<div class="clearfix"></div>

注意點(diǎn)：一個(gè)頁(yè)面中，可以有多個(gè)容器，比如頭部導(dǎo)航是100%寬度，就使用container-fluid；中間內(nèi)容區(qū)域?yàn)楣潭▽挾龋褪褂胏ontainer；但是容器之間最好不要有嵌套 關(guān)系，比如container里面嵌套container

二、響應(yīng)式工具
在不同的設(shè)備上，頁(yè)面要展示的內(nèi)容也不一樣，電腦上展示的就多，手機(jī)上展示的就少，適當(dāng)取舍；
比如右側(cè)的導(dǎo)航菜單，大屏幕顯示，小屏幕隱藏
概念：針對(duì)于不同設(shè)備展示或隱藏頁(yè)面的內(nèi)容

• 可見類：visible-a-b
  a：lg md sm xs
  b：block inline inline-block
  舉例：
  <div class="col-lg-6 visible-lg-block"> col-lg-6 </div>
  表示：在大屏幕上，div才顯示，且以block的塊級(jí)元素形式顯示，否則都不顯示

• 隱藏類：hidden-a
  a：lg md sm xs
  舉例：
  <div class="col-lg-6 hidden-xs hidden-sm"> col-lg-6 </div>
  表示：在手機(jī)屏幕或上小屏幕上，div隱藏，其他情況都顯示

• 打印類：visible-print-* hidden-print
  只有在打印頁(yè)面時(shí)，才會(huì)顯示或者隱藏頁(yè)面的某部分內(nèi)容

三、Glyphicons字體圖標(biāo)
好處：減少請(qǐng)求、容易控制樣式
用法：font-face、字體路徑

四、預(yù)定義樣式風(fēng)格，
包括按鈕btn-、彈框alert-、面板panel-、背景相關(guān)bg-、文字顏色text-

• primary：首選項(xiàng)
• success：成功
• info：一般信息
• warning：警告
• danger：危險(xiǎn)

<button type="button" class="btn btn-primary">button</button>

<div class="alert alert-success">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <strong>Title!</strong> Alert body ...
</div>

<div class="panel panel-danger">
            <div class="panel-heading">
                        <h4 class="panel-title">Panel title</h4>
            </div>
            <div class="panel-body">
                        Panel content
            </div>
</div>
<p  class="bg-primary">一行段落</p>
<span  class="text-primary">文字顏色</span>

以上的樣式分格，可以應(yīng)用到所有的標(biāo)簽上，比如a標(biāo)簽

<a href="javascript:;" class="btn btn-primary">鏈接</a>
<a href="javascript:;" class="text-primary">鏈接</a>
<a href="javascript:;" class="bg-primary">鏈接</a>

四、大小
-[ lg、sm、xs ]：包括按鈕、輸入框等都可以應(yīng)用此類來控制大小，這種大小和屏幕尺寸有關(guān)系；大的屏幕用大的按鈕，小的屏幕用小的按鈕

btn-lg、btn-sm、btn-xs  
<input type="button" class="btn btn-primary btn-lg "  value="按鈕">
input-lg、input-sm、input-xs
<input type="text" class="form-control input-lg "  placeholder="用戶名">

五、按鈕
基類：btn
樣式：btn-default（默認(rèn)） btn-link（鏈接）
大?。篵tn-[ lg、sm、xs ]
狀態(tài)：active、disabled
種類：a input button，這三種可以用于按鈕制作【推薦使用button來寫按鈕】

//input按鈕文字寫在value里，button和a寫在標(biāo)簽里
<input type="button" class="btn btn-primary btn-lg "  value="按鈕">
<a href="#" class="btn btn-primary btn-lg ">按鈕</a>
<button class="btn btn-primary">按鈕</button>

塊級(jí)：btn-block，按鈕默認(rèn)是行內(nèi)元素，加上這個(gè)就變成塊級(jí)元素，適合在移動(dòng)端使用
按鈕組：

• btn-group：改為按鈕組，按鈕之間沒有間隙
• btn-group-justified：橫向按鈕組，默認(rèn)，需要配合btn-group使用
• btn-group-vertical：縱向按鈕組，此時(shí)不需要再加btn-group
• btn-group-[ lg、sm、xs ]：大小改變
  按鈕上面加箭頭：使用類名caret

  <a href="#" class="btn btn-primary">按鈕 <span class="caret"></span> </a>
  <button class="btn btn-primary">按鈕 <span class="caret"></span> </button>
  input不行

  

箭頭向上：

<div class="btn-group dropup"> // 添加類名dropup
        <button type="button" class="btn btn-primary">按鈕1 <span class="caret"></span></button>
</div>

六、下拉菜單
屬性：
data-toggle="dropdown"（js交互操作）不單單是下拉菜單，別的組件也是如此，比如選項(xiàng)卡：data-toggle="tab"
aria-（針對(duì)特殊人群）
role（針對(duì)特殊人群）
open
dropdown-menu-right：加在dropdown-menu上，可以使得下拉菜單靠右
dropdown-header
divider
實(shí)現(xiàn)下拉菜單：三個(gè)class+data-toggle="dropdown"
三個(gè)class：父級(jí)dropdown，觸發(fā)按鈕dropdown-toggle，下拉菜單內(nèi)容dropdown-menu
觸發(fā)按鈕上加上data-toggle="dropdown"
默認(rèn)下拉框

<div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button"" data-toggle="dropdown">
                Dropdown<span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
        </ul>
</div>

<div class="dropup">
     <button class="btn btn-default dropdown-toggle" type="button"
    data-target=".dropdown"
  data-toggle="dropdown">
                Dropdown
                <span class="caret"></span>
        </button>
        <ul class="dropdown-menu"> 
                <li class="text-center"><a href="#">Action</a></li>
                <li class="text-center"><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li><a href="#">Separated link</a></li>
        </ul>
</div>
$("#drop2").on("shown.bs.dropdown",function(){
            alert(1)
    });

不僅僅是button可以做下拉菜單，a標(biāo)簽也可以，只要加上了data-toggle="dropdown"

下拉菜單的展開隱藏，可以通過標(biāo)簽上寫：data-toggle="dropdown"控制，也可以通過寫js控制
比如：
$(".dropdown-toggle").dropdown(); //也可以控制下拉菜單的顯示，但是不能隱藏，這是區(qū)別，注意??！
其他的，比如選項(xiàng)卡，用js控制的話都是類型的原理：方法名和自定義屬性名一樣
標(biāo)簽：data-toggle="tab"
js：$(".nav-tabs").tabs();
【注意點(diǎn)】用js控制多個(gè)下拉菜單，彼此之前不互相影響，然后再借用js，就可以做到顯示隱藏，且多個(gè)下拉框之間互不影響；
但是用標(biāo)簽來寫，彼此之間會(huì)有影響，且點(diǎn)擊一個(gè)下拉框，會(huì)默認(rèn)把其他的下拉框都隱藏，只顯示當(dāng)前點(diǎn)擊的那個(gè)

data-target=".dropdown"  ：指定哪些元素參與控制
$(".dropdown").on("show.bs.dropdown",function(){
        alert(1)
});
$(".dropdown").on("shown.bs.dropdown",function(){
        alert(1)
});
$(".dropdown").on("hide.bs.dropdown",function(){
        alert(1)
});
$(".dropdown").on("hiden.bs.dropdown",function(){
        alert(1)
});

七、選項(xiàng)卡

頭部：

• nav+nav-tabs：這兩個(gè)必須得加，構(gòu)成默認(rèn)選項(xiàng)卡
• nav-justified：選項(xiàng)卡等分父級(jí)寬度
• nav-tabs-justified：選項(xiàng)卡下面的線和選項(xiàng)卡原本的寬度一致，不會(huì)和父級(jí)寬度一致
• nav-pills：面包屑選項(xiàng)卡
• nav-stacked：豎狀菜單欄，和nav-pills一起使用
• 帶下拉菜單的頭部
  內(nèi)容：
• tab-content：選項(xiàng)卡內(nèi)容區(qū)
• tab-pane：每個(gè)選項(xiàng)卡塊的內(nèi)容
• data-toggle="tab"：選項(xiàng)卡頭部導(dǎo)航都得加上這個(gè)
• href對(duì)應(yīng)id：頭部對(duì)應(yīng)內(nèi)容切換
• 淡入淡出方式：當(dāng)前active選中的加上fade in，未選中的加上in
• 鼠標(biāo)移入方式

帶下拉菜單的切換

八、導(dǎo)航條
基類：navbar
navbar-default
nav navbar-nav
navbar-inverse
navbar-static-top：去掉兩邊圓角
navbar-fixed-top：固定在頭部
navbar-fixed-bottom：固定在底部
遮擋內(nèi)容的問題：給body加上margin-top即可

navbar-header
navbar-brand：網(wǎng)站logo，可以是文字或者圖片
navbar-left：導(dǎo)航菜單靠左
navbar-right：導(dǎo)航菜單靠右
navbar-btn：按鈕在導(dǎo)航條里面上下居中
navbar-link：鏈接在導(dǎo)航條里面上下居中
navbar-text：文字在導(dǎo)航條里面上下居中
navbar-form

帶下拉菜單的導(dǎo)航條
響應(yīng)式導(dǎo)航條：
navbar-toggle
collapse
navbar-collapse
滾動(dòng)監(jiān)聽
data-spy
data-target
data-offset：監(jiān)測(cè)走到距離頂部多少距離還是發(fā)生改變
舉例：監(jiān)聽body，頁(yè)面走到哪里，導(dǎo)航條隨之改變對(duì)應(yīng)的導(dǎo)航
body{ position:relative; }
.section{padding-top:50px;}
<body data-spy="scroll" data-target="#myNavbar" data-offset="50"></body>
導(dǎo)航條的導(dǎo)航里面的a標(biāo)簽的href值對(duì)應(yīng)，頁(yè)面內(nèi)容區(qū)域的id

九、各個(gè)組件
1、bs3-thumbnail:content
縮略圖：

2、bs3-alert-success
警告框：可以用于在填寫表單時(shí)的提示信息，填寫是否符合要求

3、bs3-media
媒體對(duì)象
左右對(duì)齊結(jié)構(gòu)，左邊圖片右邊文字或者左邊文字右邊圖片，可以用于構(gòu)建新聞，不僅僅是圖片，可以是視頻等等，文字也可以帶有標(biāo)題，類似于新聞標(biāo)題

4、bs3-list-group
列表組
和表格不一樣，只有表格的一列，用于顯示一列數(shù)據(jù)

5、徽章

6、bs3-panel-success
面版
可以帶有頭部、內(nèi)容區(qū)、底部

十、零碎知識(shí)點(diǎn)
1、
左浮動(dòng)：pull-left；
右浮動(dòng)：pull-right；
固定定位：affix；
居中：

• 加類.text-center（子元素居中）
• 加類.center-block（自身居中）
• 利用bootstrap中列偏移的概念。例如：col-md-offset-2(外邊距向右偏移兩列)

2、在容器里面，

<div class="container">
        <div class="bar pull-right">bar</div>
        </div>
</div>

bar所在的div不能和右邊重合，會(huì)有padding值，解決辦法：
放進(jìn)row里面或者拿出container，即：

<div class="container">
        <div class="row">
                <div class="bar pull-right">bar</div>  //放進(jìn)row里面
        </div>
</div>
<div class="bar pull-right">bar</div>  //拿出container外面

完整的選項(xiàng)卡代碼
<div role="tabpanel">
        <!-- Tab 頭 -->
        <ul class="nav nav-tabs">
                <li class="active">
                        <a href="#home" data-toggle="tab">home</a>
                </li>
                <li>
                        <a href="#tab" data-toggle="tab">tab</a>
                </li>
        </ul>
        <!-- Tab 內(nèi)容 -->
        <div class="tab-content">
                <div class="tab-pane active fade in" id="home">home的內(nèi)容</div>
                <div class="tab-pane in" id="tab">tab的內(nèi)容</div>
        </div>
</div>

$("#myTabs a").mouseover(function(){
        $(this).tab("show");
});