bootstrap教程

一、柵格系統
1、容器：包含兩種容器，

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

2、數據行(.row)必須包含在容器中，在行(.row)中可以添加列(.column)，但列數之和不能超過平分的總列數12，具體內容應當放置在列容器（.column）之內，而且只有列（.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>

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

<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>
//只有在大屏幕下，才會排成一行，其他屏幕下，就當做col-lg-6這個類名沒有生效，因為是div，獨占一行，所以肯定就排2行了

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

3、
列偏移：只能往右偏
col-*-offset-n：div向左偏移n個網格單位，（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，效果相當于二者換了個位置

4、row可以嵌套，子級就以父級寬度為總寬度，然后再以12個網格平均分配

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

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

注意點：一個頁面中，可以有多個容器，比如頭部導航是100%寬度，就使用container-fluid；中間內容區域為固定寬度，就使用container；但是容器之間最好不要有嵌套 關系，比如container里面嵌套container

二、響應式工具
在不同的設備上，頁面要展示的內容也不一樣，電腦上展示的就多，手機上展示的就少，適當取舍；
比如右側的導航菜單，大屏幕顯示，小屏幕隱藏
概念：針對于不同設備展示或隱藏頁面的內容

• 可見類：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的塊級元素形式顯示，否則都不顯示

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

• 打印類：visible-print-* hidden-print
  只有在打印頁面時，才會顯示或者隱藏頁面的某部分內容

三、Glyphicons字體圖標
好處：減少請求、容易控制樣式
用法：font-face、字體路徑

四、預定義樣式風格，
包括按鈕btn-、彈框alert-、面板panel-、背景相關bg-、文字顏色text-

• primary：首選項
• success：成功
• info：一般信息
• warning：警告
• danger：危險

<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>

以上的樣式分格，可以應用到所有的標簽上，比如a標簽

<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 ]：包括按鈕、輸入框等都可以應用此類來控制大小，這種大小和屏幕尺寸有關系；大的屏幕用大的按鈕，小的屏幕用小的按鈕

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（默認） btn-link（鏈接）
大小：btn-[ lg、sm、xs ]
狀態：active、disabled
種類：a input button，這三種可以用于按鈕制作【推薦使用button來寫按鈕】

//input按鈕文字寫在value里，button和a寫在標簽里
<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>

塊級：btn-block，按鈕默認是行內元素，加上這個就變成塊級元素，適合在移動端使用
按鈕組：

• btn-group：改為按鈕組，按鈕之間沒有間隙
• btn-group-justified：橫向按鈕組，默認，需要配合btn-group使用
• btn-group-vertical：縱向按鈕組，此時不需要再加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交互操作）不單單是下拉菜單，別的組件也是如此，比如選項卡：data-toggle="tab"
aria-（針對特殊人群）
role（針對特殊人群）
open
dropdown-menu-right：加在dropdown-menu上，可以使得下拉菜單靠右
dropdown-header
divider
實現下拉菜單：三個class+data-toggle="dropdown"
三個class：父級dropdown，觸發按鈕dropdown-toggle，下拉菜單內容dropdown-menu
觸發按鈕上加上data-toggle="dropdown"
默認下拉框

<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標簽也可以，只要加上了data-toggle="dropdown"

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

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)
});

七、選項卡

頭部：

• nav+nav-tabs：這兩個必須得加，構成默認選項卡
• nav-justified：選項卡等分父級寬度
• nav-tabs-justified：選項卡下面的線和選項卡原本的寬度一致，不會和父級寬度一致
• nav-pills：面包屑選項卡
• nav-stacked：豎狀菜單欄，和nav-pills一起使用
• 帶下拉菜單的頭部
  內容：
• tab-content：選項卡內容區
• tab-pane：每個選項卡塊的內容
• data-toggle="tab"：選項卡頭部導航都得加上這個
• href對應id：頭部對應內容切換
• 淡入淡出方式：當前active選中的加上fade in，未選中的加上in
• 鼠標移入方式

帶下拉菜單的切換

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

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

帶下拉菜單的導航條
響應式導航條：
navbar-toggle
collapse
navbar-collapse
滾動監聽
data-spy
data-target
data-offset：監測走到距離頂部多少距離還是發生改變
舉例：監聽body，頁面走到哪里，導航條隨之改變對應的導航
body{ position:relative; }
.section{padding-top:50px;}
<body data-spy="scroll" data-target="#myNavbar" data-offset="50"></body>
導航條的導航里面的a標簽的href值對應，頁面內容區域的id

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

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

3、bs3-media
媒體對象
左右對齊結構，左邊圖片右邊文字或者左邊文字右邊圖片，可以用于構建新聞，不僅僅是圖片，可以是視頻等等，文字也可以帶有標題，類似于新聞標題

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

5、徽章

6、bs3-panel-success
面版
可以帶有頭部、內容區、底部

十、零碎知識點
1、
左浮動：pull-left；
右浮動：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不能和右邊重合，會有padding值，解決辦法：
放進row里面或者拿出container，即：

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

完整的選項卡代碼
<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 內容 -->
        <div class="tab-content">
                <div class="tab-pane active fade in" id="home">home的內容</div>
                <div class="tab-pane in" id="tab">tab的內容</div>
        </div>
</div>

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