一、柵格系統(tǒng)
Bootstrap 提供了一套響應(yīng)式、移動設(shè)備優(yōu)先的流式柵格系統(tǒng)，隨著屏幕或視口（viewport）尺寸的增加，系統(tǒng)會自動分為最多12列。網(wǎng)頁的布局就在12列的基礎(chǔ)上進(jìn)行等比例劃分。
二、排版
-
標(biāo)題
標(biāo)題等級從h1到h6，字體大小如下圖
標(biāo)題.png -
頁面主體
Bootstrap 將全局 font-size 設(shè)置為 14px，line-height 設(shè)置為 1.428。這些屬性直接賦予 <body> 元素和所有段落元素。另外，段落元素還被設(shè)置了等于 1/2 行高（即 10px）的底部外邊距（margin）。
頁面主體.png
其中文本的中心內(nèi)容可以通過樣式控制將字體變大
中心內(nèi)容.png -
內(nèi)聯(lián)文本元素
1.標(biāo)記文本：用淡黃色背景顏色標(biāo)記（#fcf8e3）
標(biāo)記文本.png
2.被刪除文本：用橫線化除的方式展示
被刪除文本.png
3.著重文本：通過加粗或者斜體的方式展示
著重文本.png
4.縮略語：當(dāng)鼠標(biāo)懸停在縮寫和縮寫詞上時(shí)就會顯示完整內(nèi)容，外觀表現(xiàn)為帶有較淺的虛線框，鼠標(biāo)移至上面時(shí)會變成帶有“問號”的指針。
縮略語.png
5.引用文本：在你的文檔中引用其他來源的內(nèi)容。
引用樣式.png
三、表格
-
基本實(shí)例：少量的內(nèi)補(bǔ)（padding）和水平方向的分隔線
基本表格.png -
條紋狀表格：每一行增加斑馬條紋樣式。
條紋狀表格.png -
帶邊框的表格：為表格和其中的每個(gè)單元格增加邊框。
帶邊框的表格.png -
鼠標(biāo)懸停：每一行對鼠標(biāo)懸停狀態(tài)作出響應(yīng)，當(dāng)鼠標(biāo)停留在某一行的時(shí)候有顏色顯示
鼠標(biāo)懸停.png -
緊縮表格：讓表格更加緊湊，單元格中的內(nèi)補(bǔ)（padding）均會減半。
緊縮表格.png -
狀態(tài)顏色：為單元格設(shè)置不同的顏色表示不同的狀態(tài)
表格不同的狀態(tài).png
四、表單
-
表單的寬度依然遵循柵格系統(tǒng)，大小可以通過樣式進(jìn)行控制，bootstrap里控制的大小如下
表單大小.png -
水平排列的表單組的尺寸
水平排列的表單組.png
五、按鈕
-
bootstrap中的預(yù)定義樣式（寬度依然可以根據(jù)柵格系統(tǒng)進(jìn)行控制）：
按鈕預(yù)定義樣式.png -
按鈕尺寸
按鈕尺寸.png -
顏色
顏色.png
六、導(dǎo)航
-
標(biāo)簽頁
標(biāo)簽頁.png -
膠囊式標(biāo)簽頁
膠囊式標(biāo)簽頁.png
七、分頁
-
分頁
分頁.png -
翻頁
翻頁.png
八、徽章
九、面板（像其他組件一樣，可以簡單地通過改變顏色加入有情境效果的狀態(tài)類，給特定的內(nèi)容使用更針對特定情境的面版。）
