【表格】

.table 類指定基本樣式情臭，

.table-striped 條紋樣式，

.table-bordered 類為邊框樣式赌蔑，

.table-hover 類帶鼠標(biāo)懸停樣式俯在，

.table-condensed 類緊湊樣式。

狀態(tài)類(行或單元格設(shè)置顏色)：active惯雳，success朝巫，info，warning石景，info劈猿。

將任何 .table 元素包裹在 .table-responsive 元素內(nèi)，即可創(chuàng)建響應(yīng)式表格潮孽，其

響應(yīng)式表格: 會(huì)在小屏幕設(shè)備上（小于768px）水平滾動(dòng)揪荣。當(dāng)屏幕大于 768px 寬度時(shí)，水平滾動(dòng)條消失往史。

4

【表單】

1. 基本實(shí)例仗颈，所有設(shè)置了 .form-control 類的 、

不要講表單組直接和輸入框組混合使用椎例。建議將輸入框組嵌套到表單組中使用挨决。

form-group，input-group订歪，control-group脖祈，

2. 內(nèi)聯(lián)表單，

元素添加 .form-inline 類可使其內(nèi)容左對(duì)齊并且表現(xiàn)為 inline-block 級(jí)別的控件刷晋。只適用于視口（viewport）至少在 768px 寬度時(shí)（視口寬度再小的話就會(huì)使表單折疊）盖高。

在內(nèi)聯(lián)表單中單選/多選框控件的寬度設(shè)置為 width: auto;

如果你沒(méi)有為每個(gè)輸入控件設(shè)置 label 標(biāo)簽慎陵，屏幕閱讀器將無(wú)法正確識(shí)別。對(duì)于這些內(nèi)聯(lián)表單喻奥，你可以通過(guò)為label 設(shè)置 .sr-only 類將其隱藏席纽。

3. 水平排列的表單

通過(guò)為表單添加 .form-horizontal 類改變 .form-group 的行為，使其表現(xiàn)為柵格系統(tǒng)中的行（row）

4. 多選和單選框

.radio撞蚕、.radio-inline润梯、.checkbox、.checkbox-inline 甥厦。

5. 靜態(tài)控件

水平布局的表單中仆救，如需將一行純文本和 label 元素放置于同一行，為

元素添加 .form-control-static類即可矫渔。

6. 控件狀態(tài)

.disabled類禁用控件，為

設(shè)置disabled 時(shí)則禁用包含的所有控件摧莽。

a標(biāo)簽不受此類影響庙洼。

readonly 屬性可以禁止用戶輸入

.has-warning、.has-error 或 .has-success 類到這些控件的父元素即可镊辕。任何包含在此元素之內(nèi)的 .control-label油够、.form-control 和 .help-block 元素都將接受這些校驗(yàn)狀態(tài)的樣式。

你還可以針對(duì)校驗(yàn)狀態(tài)為輸入框添加額外的圖標(biāo)（注意依賴于label標(biāo)簽）征懈。只需設(shè)置相應(yīng)的 .has-feedback 類并添加正確的圖標(biāo)即可石咬。

7. 控件尺寸

通過(guò) .input-lg .input-sm類似的類可以為控件設(shè)置高度，通過(guò) .col-lg-* 類似的類可以為控件設(shè)置寬度

通過(guò)添加 .form-group-lg 或 .form-group-sm 類卖哎，為 .form-horizontal 包裹的 label 元素和表單控件快速設(shè)置尺寸鬼悠。

用柵格系統(tǒng)中的列（column）包裹輸入框或其任何父元素，都可很容易的為其設(shè)置寬度亏娜。

8. 輔助文本

help-block類焕窝，針對(duì)表單控件的“塊（block）”級(jí)輔助文本。

5

【按鈕】

1. 基本樣式维贺，btn它掂、btn-default、btn-primary溯泣、btn-success虐秋、btn-info、btn-warning垃沦、btn-danger客给、active

2. 展現(xiàn)形式，btn-link栏尚、btn-block起愈、close

3. 尺寸樣式只恨，.btn-lg、.btn-sm 抬虽、.btn-xs 官觅。

可通過(guò) 、 或? 元素應(yīng)用按鈕類阐污，但建議用? 元素來(lái)獲得在各個(gè)瀏覽器上獲得相匹配的繪制效果休涤。

6

【圖片】

圖片形狀，img-rounded笛辟，img-circle功氨，img-thumbnail，IE8 不支持 CSS3 中的圓角屬性手幢。

7

【輔助】

text-muted捷凄、text-primary、text-success围来、text-info跺涤、text-warning、text-danger

bg-primary监透、bg-success桶错、bg-info、bg-warning胀蛮、bg-danger院刁、

三角符號(hào)，caret

浮動(dòng)

居中

組件樣式

1

【圖標(biāo)】

200個(gè)來(lái)自 Glyphicon Halflings 的字體圖標(biāo)粪狼，

圖標(biāo)類只能應(yīng)用在空元素上退腥，且不可與其它組件聯(lián)合使用。

2

【菜單】

將下拉菜單觸發(fā)器和下拉菜單都包裹在 .dropdown 里

菜單對(duì)齊：默認(rèn)情況下鸳玩，下拉菜單自動(dòng)沿著父元素的上沿和左側(cè)被定位為 100% 寬度阅虫。 為 .dropdown-menu 添加 .dropdown-menu-right 類可以讓菜單右對(duì)齊

菜單分組：dropdown-header表描述項(xiàng)，.disabled 表禁用項(xiàng)

向上彈出： .dropup 類就能使觸發(fā)的下拉菜單朝上方打開(kāi)

3

【按鈕組】

按鈕組.btn-group不跟，通過(guò).btn-group-* 指定組中按鈕尺寸颓帝。

按鈕欄.btn-toolbar

鈕垂直堆疊排列顯示btn-group-vertical

兩端對(duì)齊排列的按鈕組btn-group-justified

4

【導(dǎo)航】

標(biāo)簽頁(yè).nav-tabs 類依賴 .nav 基類。

膠囊式標(biāo)簽頁(yè).nav-pills 類窝革，添加 .nav-stacked 類改為垂直堆疊购城。

.nav-justified 類可以很容易的讓標(biāo)簽頁(yè)或膠囊式標(biāo)簽呈現(xiàn)出同等寬度。

navbar navbar-default

對(duì)于不包含在

中的? 元素虐译，加上 .navbar-btn 后瘪板，可以讓它在導(dǎo)航條里垂直居中。

將表單放置于 .navbar-form 之內(nèi)可以呈現(xiàn)很好的垂直對(duì)齊漆诽，

.navbar-text

.navbar-link

.navbar-left 和 .navbar-right 工具類讓導(dǎo)航鏈接侮攀、表單锣枝、按鈕或文本對(duì)齊。

.navbar-fixed-top 類可以讓導(dǎo)航條固定在頂部

.navbar-fixed-bottom 類可以讓導(dǎo)航條固定在底部

.navbar-static-top 類可讓導(dǎo)航條隨著頁(yè)面向下滾動(dòng)而消失兰英。

.navbar-inverse 類可以改變導(dǎo)航條的外觀撇叁。

breadcrumb 創(chuàng)建帶有層次的導(dǎo)航結(jié)構(gòu)（面包屑）。

5

【分頁(yè)】

pagination畦贸，并根據(jù)情況對(duì)頁(yè)碼使用.disabled 類陨闹、 .active 類。

.pagination-lg 或 .pagination-sm 類提供了額外可供選擇的尺寸薄坏。

pager上一頁(yè)和下一頁(yè)的簡(jiǎn)單翻頁(yè)趋厉。并可通過(guò)previous，next類標(biāo)示胶坠。

6

【標(biāo)簽】

label標(biāo)簽基類君账，可通過(guò)label-default, label-primary, label-success, label-info, label-warning, label-danger改變標(biāo)簽的外觀。

badge沈善，可以很醒目的展示新的或未讀的信息條目杈绸。

7

【其它】

縮略圖

提示框

進(jìn)度條

媒體對(duì)象等

定制樣式

1

BootStrap提供了根據(jù)自己需要的組件及jquery插件進(jìn)行定制，使用者也可以直接修改Less源碼矮瘟。

總結(jié)

1

本篇經(jīng)驗(yàn)僅從全局簡(jiǎn)單介紹Bootstrap的內(nèi)容，細(xì)節(jié)部分并不具體塑娇，Bootstrap的使用非常靈活澈侠，可以對(duì)各種組件進(jìn)行合并使用（如：為標(biāo)簽頁(yè)項(xiàng) 添加帶下拉菜單），建議使用過(guò)程中實(shí)時(shí)參考官方文檔埋酬，官方文檔有更詳細(xì)的下載及使用說(shuō)明哨啃，針對(duì)具體樣式有直觀樣例，而且有豐富的主題案例写妥。