Bootstrap 是基于H5利用 JS和CSS 進(jìn)行布局橱乱、提供插件办成、動畫的一個框架俱病。使用了JQuery進(jìn)行DOM控制官疲。

1、布局部分

采用了 網(wǎng)格式布局（本質(zhì)上是table布局庶艾，把頁面按照網(wǎng)格進(jìn)行布局）

I袁余、把設(shè)備分為了四種- 按找媒體查詢，實現(xiàn)響應(yīng)式布局(按照 max-width/min-width進(jìn)行區(qū)分)

xs 768

sm 768 - 992

md 992 - 1200

lg 1200 -

II咱揍、把一個空間分成 12 列

col-設(shè)備-列寬度

網(wǎng)格布局可以嵌套，每行一都是 12棚饵，可以小于 12 但不能大于 12

III、除了規(guī)整布局外，還可以偏移

col-xxx-offset-xx 跳過起始列

col-xxx-push-xx 向右推幾列

col-xxx-pull-xx 向左推幾列

IV抖锥、還提供了響應(yīng)式布局的控制

visibile-xs-xxx

hide-xs-xxx

visibile-xs-block/inline/block-inline

2蜂莉、組件

所有的布局組件基本都提供了如下的樣式

I、四種類型的樣式 success/info/warning/danger 來區(qū)分不同場景下的顯示

II欣硼、提供了狀態(tài)： active/disable 激活和禁止的 樣式; 提供了 show和 hide

III题翰、提供了控件大小 xxx-md/xs/lg/sm

3、基本組件 - 樣式

I诈胜、文本類樣式

Bootstrap 為文本提供了豹障，類似于Word 排版功能的樣式

a、各種主標(biāo)題焦匈、副標(biāo)題血公、子標(biāo)題 .head .small ...

b、文本對齊 .text-left/right/center

c缓熟、自定義了一些元素標(biāo)簽

address 地址

abbr 帶提示的文本

應(yīng)用 blockquote & small cite q

復(fù)雜列表 dl/dt （增強(qiáng) ul/ol)

d累魔、提供了H5源代碼的顯示

code pre 元素

II摔笤、表格

.table

.table-border

.table-hover 提供懸停樣式

還有一些其他背景樣式 .table-stripped 緊湊表格.table-condensed 響應(yīng)式布局.table-responsive

結(jié)合 .success 等四種樣式，還能對表格數(shù)據(jù)實現(xiàn) 差異化的展示(比如通過 js垦写，angularjs對數(shù)據(jù)進(jìn)行處理吕世、ng-class 動態(tài)添加class）

III、表單

a梯投、在 元素中提供 .form 的 role屬性 類寞冯，提供樣式 （這邊自定義了一個role屬性，而不是樣式)

b晚伙、在每一組(label + 控件) 提供 .form-group 的class類提供樣式吮龄，包括間距等等

c、默認(rèn)是 垂直布局咆疗，如果需要 內(nèi)聯(lián)/水平 在 元素 提供 .form-inline/.form-horizontal 樣式

這三種布局的區(qū)別是

垂直漓帚，所有元素都是占據(jù)一行，即使是 .form-group 組內(nèi)的也是

內(nèi)聯(lián)午磁，所有元素都合并到 同一行

水平尝抖，指的是 .from-group 同一組內(nèi)的元素是同一行

d、提供了以下表單控件

Input輸入框 (text/password/dattime/number/email/url ...)

文本框 Textarea

選擇框 (復(fù)選 checkbox/單選 radio)

靜態(tài)控件 -- 用于一些標(biāo)簽后的純文本顯示 提供了一個 form-control-static 類

e迅皇、表單狀態(tài)和驗證

除了基本狀態(tài)active/disable 外昧辽，還有 focus狀態(tài) .focus

驗證？登颓？(has-error/warning/success 只是樣式搅荞？）

IV、按鈕

a框咙、首先使用 .btn .btn-default 使用基本樣式咕痛，比如圓角等等；然后可選各種按鈕屬性

b喇嘱、最終的按鈕屬性 .active / .disabled 這些茉贡，原始的就可以標(biāo)注按鈕是否點擊過，通過 angularJS的比如 ng-class/ ng-click 這些來達(dá)到按鈕的豐富控制

c者铜、a 鏈接元素也可以使用按鈕樣式

V腔丧、圖片

圖片樣式比較簡單就是普通圖片，很難有什么特別的樣式處理

a作烟、增加了 圓角 img-rounded 原型 img-circle

b愉粤、提供類似 縮略圖的樣式 img-thumbnail

其他一些功能

a、提供了布局的一些控制 .pull-left .pull-right .center-block .clearfix 清除浮動

b俗壹、屏幕專用 sr-only

c科汗、.close .caret 提供了 關(guān)閉和下來的類似按鈕的樣式

4、增強(qiáng)版組件 - 樣式

增強(qiáng)版功能绷雏，主要是在 一些基本組件上進(jìn)行功能疊加头滔，形成一些常用的組件

I怖亭、字體圖標(biāo)

幾乎所有常見的圖標(biāo)都有，建議所有圖標(biāo)盡量使用字體圖標(biāo)坤检，而不是 icon 圖片兴猩，一是因為性能；二是因為字體圖標(biāo)可以任意控制

II早歇、基于列表ul(ol)/li 實現(xiàn)的一些控件

a倾芝、基本菜單

通過 display:inline 把列表在一行顯示，并且設(shè)置邊框箭跳，背景晨另，陰影等一系列效果

b、導(dǎo)航元素 -- 就是一個Tab控件

使用 .nav 類 + .nav-tabs

把Tab控件變成 膠囊導(dǎo)航

.nav-pills

使用垂直的導(dǎo)航菜單 .nav-stacked

兩端對齊 .nav-justified

c谱姓、導(dǎo)航欄 -- 類似菜單效果

在導(dǎo)航元素的基礎(chǔ)上增加一個 .navbar-nav 的類借尿，就可以實現(xiàn) 導(dǎo)航欄的效果

navbar-header/navbar-brand

使用icon-bar 多個疊加可以形成特殊效果的 漢堡按鈕 （把他放在按鈕里面，響應(yīng)點擊事件）

導(dǎo)航中的組件對齊方式 : .navbar-left/right 都是基于 float的浮動

導(dǎo)航中的位置:

固定位置 .navabar-fixed-top/bottom屉来， 不管滾動條如何滾動都是 當(dāng)前瀏覽器的頂部（這個就可以做成現(xiàn)在網(wǎng)站的 頂部導(dǎo)航功能路翻，表格導(dǎo)航） 靜態(tài)位置 .navbar-static-top 隨著滾動條，導(dǎo)航菜單就移動到畫面外

倒置導(dǎo)航欄 -- 主要指顏色的對比茄靠，類似于 負(fù)片

d茂契、面包屑導(dǎo)航

.breadcrumb

e、分頁 & 翻頁

f慨绳、列表組

還是使用的列表掉冶，功能類似于 下拉菜單，或者導(dǎo)航

III儡蔓、按鈕組

通過.btn-group 提供按鈕組的功能郭蕉； .btn-toolbar 再把分組的按鈕組結(jié)合在一起。按鈕組也可以嵌套

使用 按鈕組和 直接多個button連在一起的區(qū)別是（1喂江、內(nèi)聯(lián)；2旁振、按鈕間距）

IV获询、表單增強(qiáng) - 輸入框組

a、簡單分組 input-group 和btn-group類似拐袜，功能提供不多

b吉嚣、input-group-addon 提供面板功能，利用這個面板可以提供非常豐富的組合功能

按鈕|文本|復(fù)選框|下來菜單|分隔式下來菜單... 甚至圖片也可以

V蹬铺、表單增強(qiáng) - 標(biāo)簽 & 徽章

標(biāo)簽功能很簡單 .lable .label-default ...

徽章功能不簡單

VI尝哆、圖片增強(qiáng) - 直接增加縮略圖

取代了img-xx 的樣式，直接使用 .thumbnail

VII甜攀、容器（面板 & 警告 & well）

提供面板功能秋泄，一般對于一個單獨的組件琐馆，一個彈出框，就比較有用了

.panel

.panel-heading

.panel-title

.panel-body

.panel-footer

提供一個警告框恒序，可以結(jié)合 success 等多種樣式來實現(xiàn)顯示功能

.alert

.well -- 提供一個嵌入面板的效果

VIII瘦麸、新控件 - 進(jìn)度條

(也可以用在條形圖適用的場景）

.progress

.progress-bar

style width 作為 進(jìn)度數(shù)據(jù);可以增加條紋和動畫效果

IVV、頁面標(biāo)題 & 超大屏幕

.page-header

.jumbotron

VV歧胁、多媒體對象

.media

.meida-heading

.media-body

.media-object

可以用在類似一些 圖文結(jié)合的場合滋饲，比如 文章評論

效果

fade

5、插件 - 樣式+屬性(JS)

Bootstrap 提供了 data-xx 屬性（對應(yīng)有API操作喊巍，可以二選一）屠缭，通過 12 個js來實現(xiàn)

I、屬性部分

data-toggle 觸發(fā)型

collapse - 折疊效果（同級別）

dropdown - 下來菜單（子級別）

modal - 模態(tài)框

tab - 標(biāo)簽頁

tooltip - 提示工具

popover - 彈出框 （可以支持 HTML塊崭参，能夠有箭頭引導(dǎo)）

button/buttons - 按鈕切換效果

根據(jù)觸發(fā)（一般是點擊觸發(fā)）時呵曹，是否有 大段內(nèi)容需要展示，要分為是否需要有 目標(biāo)對象 data-target阵翎； 除了 tooltip/popover提示內(nèi)容比較簡單逢并、button 只是樣式外，其他的都需要有目標(biāo)郭卫。

目標(biāo)一般可以采用兩種方式

a砍聊、data-target

b、href

data-spy 監(jiān)控型

scroll - 監(jiān)控滾動贰军，當(dāng)前頁面頂部激活到哪個部分

affix - 當(dāng)滾動或者其他觸發(fā)時玻蝌，固定在某一個位置，不再隨頁面滾動 （table表頭的最佳實現(xiàn))

監(jiān)控型主要是監(jiān)控的 滾動條變化時词疼，對元素的動態(tài)顯示控制俯树，包括位置設(shè)置等等。affix 因為是固定位置贰盗，所以只需要 data-offset-top/bottom 指定值就可以了许饿。

II、標(biāo)準(zhǔn)插件過程

a舵盈、一般 提供一些 樣式類陋率，來定義插件的樣式

b、定義 data-xx 屬性秽晚，指定實現(xiàn)何種插件效果瓦糟；并可能會指定 目標(biāo)元素塊 一般是 data-target/href

c、目標(biāo)元素塊 ID

III赴蝇、事件

事件一般是兩類菩浙，一類是過程開始觸發(fā)；一類是過程執(zhí)行結(jié)束

xx.bs.插件

xxed.bs.插件

比如

show.bs.collpase

shown.bs.collpase (closed.bs.alert)

IV、其他data屬性

data-miss?

data-dismiss="alert|modal" aria-hidden="true"

data-dissmiss 選項為 alert|modal 提供關(guān)閉功能

V劲蜻、模態(tài)框插件 - toggle

VI陆淀、下拉菜單插件 - toggle

a、外層容器的元素 定義 .dropdown 的 class類

b斋竞、選擇一個下拉的元素(任意元素倔约，比如p，當(dāng)然常見的是button) 使用 .dropdown-toggle 的類坝初，并使用 data-toggle 屬性（另外 .caret 下來剪頭可選）

c浸剩、提供 列表ul ，并且指定 .dropdown-menu 類

菜單還可以提供分隔符 .divider

菜單還可以變成上拉菜單 .dropup

菜單如果失效 .disable

添加標(biāo)題 .dropdown-header

利用 btn-group + 下拉菜單鳄袍，形成按鈕下來菜單

VII绢要、標(biāo)簽頁插件 - tab頁/導(dǎo)航欄 toggle

在前面導(dǎo)航元素里面，提到過 使用 .nav nav-tabs 可以實現(xiàn) 標(biāo)簽頁（tab）的效果拗小，但如果只是這些重罪，只有標(biāo)簽欄，沒有數(shù)據(jù)哀九；如果需要實現(xiàn)標(biāo)簽頁+數(shù)據(jù)剿配，就需要用到 data屬性了。

1阅束、data-toggle 指定觸發(fā)點是 tab呼胚，通過 data-target/ href 指定目標(biāo)元素塊

--- 因為是 tab，有多個點擊按鈕息裸，多個目標(biāo)蝇更，所以每一個 li 都需要增加觸發(fā)點

2、目標(biāo)塊 定義 ID屬性

增加淡入淡出效果 .tab-pane .fade

結(jié)合前面的下拉可以實現(xiàn)導(dǎo)航菜單 | 結(jié)合后面的折疊也可以實現(xiàn) 呼盆？

VIII年扩、內(nèi)控插件（提示工具、彈出框访圃、按鈕）- toggle

內(nèi)控插件是自發(fā)明的一個說法厨幻，主要這三個插件，沒有單獨的元素塊進(jìn)行操作

提示工具：

a腿时、data-toggle="tooltip" 定義觸發(fā)點

b克胳、提示內(nèi)容，因為 提示比較簡單圈匆，只有一個描述，所以沒有使用 target/href等操作捏雌，直接使用了 title屬性

對于提示出現(xiàn)的位置提供了 data-placement="left/right/top/bottom" 屬性

另外還提供 data-html 可以編寫 HTML 代碼塊跃赚；提供觸發(fā)方式、時延、動畫效果等等

彈出框 - 增強(qiáng)一點的提示工具(很多功能都類似)

a纬傲、data-toggle="popover"

b满败、使用 title屬性 使用 data-content 屬性，增加內(nèi)容（tooltip 也可以）

按鈕 - 實現(xiàn)響應(yīng)上的一組按鈕

a叹括、data-toggle="button/ buttons" 提供了單個按鈕（多個按鈕組）的切換功能,一般結(jié)合 btn-group 使用

-- 比如算墨，點擊和非點擊時的狀態(tài)不同（可以用在查詢按鈕）

b、提供了 data-loading-text ,作為 加載時的按鈕 文本汁雷，需要配合 JS 加載 事件聯(lián)合使用

IX净嘀、折疊插件 - toggle

a、定義 觸發(fā)點 data-toggle="collapse" 定義 data-target="#id"/ href=""

b侠讯、定義 折疊內(nèi)容 的 id

面板 .panel-collapse .collapse .in 還提供了一些class類增加樣式

data-parent 提供了折疊的下拉框分組屬性（就是 失敗原因多個折疊面板挖藏，同時只能有一個顯示）

雖然都是控制界面顯示，折疊和下拉還是略有區(qū)別厢漩；1膜眠、指定target 時，下拉是指定自己的父容器溜嗜；而折疊則是平級的目標(biāo)宵膨；2、下拉會遮擋其他元素炸宵；而折疊會平移元素辟躏。

折疊一般用在 according 下來面板，主要是條件方面焙压；而下拉一般是用在 菜單和到紅方面

X鸿脓、滾動監(jiān)聽 - spy

a、定義監(jiān)控點（對應(yīng)的是觸發(fā)點） data-spy="scroll" data-target 指定關(guān)注監(jiān)控點的目標(biāo)即監(jiān)控哪些數(shù)據(jù)（div段落）

b涯曲、在被監(jiān)控點的每個節(jié)點部分 定義 id 屬性

c野哭、關(guān)注監(jiān)控的地方，使用 href='#id' /data-target 幻件，則在滾動到具體div段落id時拨黔，選擇事件就會觸發(fā)到該選項

data-offset -- 距離頂部的偏移像素

水平|垂直 - 主要差別在監(jiān)控的菜單是水平擺放，還是垂直擺放

XI绰沥、附加導(dǎo)航 - spy

附加導(dǎo)航主要功能是篱蝇，在觸發(fā)之前，位置不變徽曲，一旦觸發(fā)零截，比如距離頂部還有 125 個像素開始顯示

有多個樣式可以控制 .affix .affix-top .affix-bottom

data-offset 對于頂端的偏移量

這個是實現(xiàn)table|導(dǎo)航欄|搜索 等等浮動到頂部的一個重要功能

XII、輪播 - 單獨的一個功能點

提供了類似秃臣，一個幻燈片的涧衙，多個圖片切換的功能哪工，這個在 網(wǎng)站的主頁廣告宣傳欄標(biāo)準(zhǔn)配置

a、首先要指定樣式 （沒有樣式無法使用弧哎，不像button 之類的雁比，離開一些樣式正常使用）

容器使用 .carousel 樣式 加上 .slide 樣式有漸變滾動效果

b、設(shè)定幻燈片面板

.carousel-indicators 樣式

data-target 指定顯示的外層容器 即使用 .carousel 的類

data-slide-to='index' 指定該圖片的索引位置

c撤嫩、具體顯示的圖片

.carousel-inner 樣式 每個圖片使用 item 樣式 其中要有一個圖片 active 偎捎，不然幻燈片不會顯示

至此就可以實現(xiàn)了，如果需要加上前向和后向的按鈕

d序攘、導(dǎo)航按鈕 .carousel-congtrol left data-slide="prev" data-tagert/href 同樣指向 外層的容器面板

如果需要給圖片加 顯示內(nèi)容

e茴她、添加圖片文字 .carousel-caption 可以添加HTML和純文本

data-interval 可以顯式指定，自動播放循環(huán)的間隔

data-pause 鼠標(biāo)進(jìn)入時暫停循環(huán)两踏，離開時恢復(fù) hover 屬性败京，還可以有其他的

data-wrap 是否循環(huán)播放

還有一個警告框，用處不是很大

總體而言梦染、1：Bootstrap 提供了 表單 | 表格 | 圖片 | 按鈕 | 排版 等基本功能的樣式赡麦，并提供了很多增強(qiáng)的控件 按鈕組 | 標(biāo)簽 | 徽章 | 進(jìn)度條 | 導(dǎo)航 | 分頁 | 面板 | 圖標(biāo) | 輸入框組、并通過動態(tài)插件增加了有著豐富動作的 下拉 | 折疊 | 模態(tài) | 監(jiān)控 | 輪播 帕识，結(jié)合了各種組件實現(xiàn)了控件的豐富功能泛粹；2：提供了豐富的布局功能，通過柵格/網(wǎng)格化布局肮疗，實現(xiàn)了 類似Java的Grid 布局方式晶姊。