一、柵格佈局

       將當前標籤（容器）佈局按表格進行分割，行數不限，總共有12列（12個單位長度）。

1、基本類

            row  設定一行

            col-md-n  設定當前標籤佔據n個單位長度（n取值範圍1-12）

 2、柵格引數（實現響應式佈局，即在不同解析度如手機，平板上也可達到相同效果）

col-xs-n    設定手機當前佔據n個單位長度（n取值範圍1-12）(<768px)

col-sm-n   設定平板當前佔據n個單位長度（n取值範圍1-12）(≥768px)

col-md-n   設定電腦當前佔據n個單位長度（n取值範圍1-12）(≥992px)

col-lg-n     設定大桌面顯示器 當前佔據n個單位長度（n取值範圍1-12）(≥1200px)

 3、列偏移和列巢狀

col-md-offset-n   設定電腦偏移n個單位長度

col-sm-n   在列裡面再巢狀一個柵格佈局（包含行和列），行仍使用row的class屬性，列需要使用col-sm-n來表示列的單位個數。

                 取值範圍不能超過剩下的單位長度（即12-前面已使用的單位長度）

二、表單樣式

1、補充label標籤知識：

for 屬性規定 label 與哪個表單元素繫結。實現點選關聯字游標在關聯輸入框閃爍。 顯式的聯絡： <label for="SSN">SNumber:</label> <input type="text" name="SNum" id="SSN" /> 隱式的聯絡： <label>Date: <input type="text" name="Date" /></label> 第一個標記是以顯式形式將文字 "SNumber:" 和表單的社會安全號碼的文字輸入控制元件 ("SNum") 聯絡起來，它的 for 屬性的值和控制元件的 id 一樣，都是 SSN。 第二個標記 ("Date:") 不需要 for 屬性，它的相關控制元件也不需要 id 屬性，它們是通過在 <label> 標籤中放入 <input> 標籤來隱式地連線起來的。

2、設定表單（每個輸入項一定要設定label）：每個表單標籤<form>裡設定form-horizontal類使得當前表單使用柵欄佈局

form-horizontal    水平表單（在form標籤內使用）

form-group   表單組（即當前標籤是一個表單行），此時當前div標籤預設為一行row，不用在設定row form-control   設定<input>、<textarea>、<select>元素為寬度100%的圓角邊框 placeholder="請輸入名稱" ：與class一樣的獨立屬性，顯示提示性文字

form-group        control-label      自動設定label標籤的格式 form-control      自動設定輸入項的格式

form-inline       內聯表單，表單裡的標籤是並排的 sr-only             隱藏label