【表格】

.table 類指定基本樣式，

.table-striped 條紋樣式，

.table-bordered 類為邊框樣式，

.table-hover 類帶鼠標懸停樣式，

.table-condensed 類緊湊樣式。

狀態類(行或單元格設置顏色)：active，success，info，warning，info。

將任何 .table 元素包裹在 .table-responsive 元素內，即可創建響應式表格，其

響應式表格: 會在小屏幕設備上（小于768px）水平滾動。當屏幕大于 768px 寬度時，水平滾動條消失。

4

【表單】

1. 基本實例，所有設置了 .form-control 類的 、

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

form-group，input-group，control-group，

2. 內聯表單，

元素添加 .form-inline 類可使其內容左對齊并且表現為 inline-block 級別的控件。只適用于視口（viewport）至少在 768px 寬度時（視口寬度再小的話就會使表單折疊）。

在內聯表單中單選/多選框控件的寬度設置為 width: auto;

如果你沒有為每個輸入控件設置 label 標簽，屏幕閱讀器將無法正確識別。對于這些內聯表單，你可以通過為label 設置 .sr-only 類將其隱藏。

3. 水平排列的表單

通過為表單添加 .form-horizontal 類改變 .form-group 的行為，使其表現為柵格系統中的行（row）

4. 多選和單選框

.radio、.radio-inline、.checkbox、.checkbox-inline 。

5. 靜態控件

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

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

6. 控件狀態

.disabled類禁用控件，為

設置disabled 時則禁用包含的所有控件。

a標簽不受此類影響。

readonly 屬性可以禁止用戶輸入

.has-warning、.has-error 或 .has-success 類到這些控件的父元素即可。任何包含在此元素之內的 .control-label、.form-control 和 .help-block 元素都將接受這些校驗狀態的樣式。

你還可以針對校驗狀態為輸入框添加額外的圖標（注意依賴于label標簽）。只需設置相應的 .has-feedback 類并添加正確的圖標即可。

7. 控件尺寸

通過 .input-lg .input-sm類似的類可以為控件設置高度，通過 .col-lg-* 類似的類可以為控件設置寬度

通過添加 .form-group-lg 或 .form-group-sm 類，為 .form-horizontal 包裹的 label 元素和表單控件快速設置尺寸。

用柵格系統中的列（column）包裹輸入框或其任何父元素，都可很容易的為其設置寬度。

8. 輔助文本

help-block類，針對表單控件的“塊（block）”級輔助文本。

5

【按鈕】

1. 基本樣式，btn、btn-default、btn-primary、btn-success、btn-info、btn-warning、btn-danger、active

2. 展現形式，btn-link、btn-block、close

3. 尺寸樣式，.btn-lg、.btn-sm 、.btn-xs 。

可通過 、 或? 元素應用按鈕類，但建議用? 元素來獲得在各個瀏覽器上獲得相匹配的繪制效果。

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、

三角符號，caret

浮動

居中

組件樣式

1

【圖標】

200個來自 Glyphicon Halflings 的字體圖標，

圖標類只能應用在空元素上，且不可與其它組件聯合使用。

2

【菜單】

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

菜單對齊：默認情況下，下拉菜單自動沿著父元素的上沿和左側被定位為 100% 寬度。 為 .dropdown-menu 添加 .dropdown-menu-right 類可以讓菜單右對齊

菜單分組：dropdown-header表描述項，.disabled 表禁用項

向上彈出： .dropup 類就能使觸發的下拉菜單朝上方打開

3

【按鈕組】

按鈕組.btn-group，通過.btn-group-* 指定組中按鈕尺寸。

按鈕欄.btn-toolbar

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

兩端對齊排列的按鈕組btn-group-justified

4

【導航】

標簽頁.nav-tabs 類依賴 .nav 基類。

膠囊式標簽頁.nav-pills 類，添加 .nav-stacked 類改為垂直堆疊。

.nav-justified 類可以很容易的讓標簽頁或膠囊式標簽呈現出同等寬度。

navbar navbar-default

對于不包含在

中的? 元素，加上 .navbar-btn 后，可以讓它在導航條里垂直居中。

將表單放置于 .navbar-form 之內可以呈現很好的垂直對齊，

.navbar-text

.navbar-link

.navbar-left 和 .navbar-right 工具類讓導航鏈接、表單、按鈕或文本對齊。

.navbar-fixed-top 類可以讓導航條固定在頂部

.navbar-fixed-bottom 類可以讓導航條固定在底部

.navbar-static-top 類可讓導航條隨著頁面向下滾動而消失。

.navbar-inverse 類可以改變導航條的外觀。

breadcrumb 創建帶有層次的導航結構（面包屑）。

5

【分頁】

pagination，并根據情況對頁碼使用.disabled 類、 .active 類。

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

pager上一頁和下一頁的簡單翻頁。并可通過previous，next類標示。

6

【標簽】

label標簽基類，可通過label-default, label-primary, label-success, label-info, label-warning, label-danger改變標簽的外觀。

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

7

【其它】

縮略圖

提示框

進度條

媒體對象等

定制樣式

1

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

總結

1

本篇經驗僅從全局簡單介紹Bootstrap的內容，細節部分并不具體，Bootstrap的使用非常靈活，可以對各種組件進行合并使用（如：為標簽頁項 添加帶下拉菜單），建議使用過程中實時參考官方文檔，官方文檔有更詳細的下載及使用說明，針對具體樣式有直觀樣例，而且有豐富的主題案例。