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

10年積累的網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有梨林免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

        

                col
                

        
        

                col
                

        
        

                col
                

        
        

                col
                

        

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

        col
        



        col
        


//只有在大屏幕下，才會排成一行，其他屏幕下，就當(dāng)做col-lg-6這個類名沒有生效，因為是div，獨占一行，所以肯定就排2行了

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

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

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

col-lg-2
col-lg-10

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

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

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

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

• 可見類：visible-a-b
  a：lg md sm xs
  b：block inline inline-block
  舉例：
  

  col-lg-6
  
  表示：在大屏幕上，div才顯示，且以block的塊級元素形式顯示，否則都不顯示

• 隱藏類：hidden-a
  a：lg md sm xs
  舉例：
  

  col-lg-6
  
  表示：在手機屏幕或上小屏幕上，div隱藏，其他情況都顯示

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

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

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

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

button


        ×
        Title! Alert body ...



            

                        
Panel title
            
            

                        Panel content
            

一行段落
文字顏色

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

鏈接
鏈接
鏈接

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

btn-lg、btn-sm、btn-xs  

input-lg、input-sm、input-xs

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

//input按鈕文字寫在value里，button和a寫在標(biāo)簽里

按鈕
按鈕

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

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

  按鈕  
  按鈕  
  input不行

  

箭頭向上：

 // 添加類名dropup
        按鈕1 

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

        
                Dropdown
        
        

                
Action
                
Another action
                
Something else here
                
Separated link
        



     
                Dropdown
                
        
        
 
                
Action
                
Another action
                
Something else here
                
Separated link
        

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

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：這兩個必須得加，構(gòu)成默認(rèn)選項卡
• nav-justified：選項卡等分父級寬度
• nav-tabs-justified：選項卡下面的線和選項卡原本的寬度一致，不會和父級寬度一致
• nav-pills：面包屑選項卡
• nav-stacked：豎狀菜單欄，和nav-pills一起使用
• 帶下拉菜單的頭部
  內(nèi)容：
• tab-content：選項卡內(nèi)容區(qū)
• tab-pane：每個選項卡塊的內(nèi)容
• data-toggle="tab"：選項卡頭部導(dǎo)航都得加上這個
• href對應(yīng)id：頭部對應(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
滾動監(jiān)聽
data-spy
data-target
data-offset：監(jiān)測走到距離頂部多少距離還是發(fā)生改變
舉例：監(jiān)聽body，頁面走到哪里，導(dǎo)航條隨之改變對應(yīng)的導(dǎo)航
body{ position:relative; }
.section{padding-top:50px;}

導(dǎo)航條的導(dǎo)航里面的a標(biāo)簽的href值對應(yīng)，頁面內(nèi)容區(qū)域的id

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

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

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

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

5、徽章

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

十、零碎知識點
1、
左浮動：pull-left；
右浮動：pull-right；
固定定位：affix；
居中：

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

2、在容器里面，

        
bar