1、基礎表單：
（1）表單中常見的元素主要包括：文本輸入框、下拉選擇框、單選按鈕、複選按鈕、文本域和按鈕等。
（2）Bootstrap並未對其做太多的定製性效果設計，僅僅對錶單內的fieldset、legend、label標籤進行了定製。
（3）當然表單除了這幾個元素之外，還有input、select、textarea等元素，在Bootstrap框架中，通過定製了一個類名“form-control”，也就是說，如果這幾個元素使用了類名“form-control”，將會實現一些設計上的定製效果。
- 寬度變成了100%
- 設置了一個淺灰色（#ccc）的邊框
- 具有4px的圓角
- 設置陰影效果，並且元素得到焦點之時，陰影和邊框效果會有所變化
- 設置了placeholder的顏色爲#999
2、水平表單：
（1）Bootstrap框架默認的表單是垂直顯示風格，但很多時候我們需要的水平表單風格（標籤居左，表單控件居右）。
（2）在Bootstrap框架中要實現水平表單效果，必須滿足以下兩個條件：
- 在<form>元素是使用類名“form-horizontal”。
- 配合Bootstrap框架的網格系統
（3）在<form>元素上使用類名“form-horizontal”主要有以下幾個作用：
- 設置表單控件padding和margin值。
- 改變“form-group”的表現形式，類似於網格系統的“row”。
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">郵箱</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="請輸入您的郵箱地址">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密碼</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="請輸入您的郵箱密碼">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox">記住密碼
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btnbtn-default">進入郵箱</button>
</div>
</div>
</form>
3、內聯表格：
在Bootstrap框架中實現這樣的表單效果是輕而易舉的，你只需要在<form>元素中添加類名“form-inline”即可。
內聯表單實現原理非常簡單，欲將表單控件在一行顯示，就需要將表單控件設置成內聯塊元素（display:inline-block）。
4、表單控件：input
（1）在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式
（2）爲了讓控件在各種表單風格中樣式不出錯，需要添加類名“form-control”，如：
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>
5、下拉框select：
（1）Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設置multiple屬性的值爲multiple。
<form role="form">
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
<div class="form-group">
<select multiple class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
6、文本域textarea：
文本域和原始使用方法一樣，設置rows可定義其高度，設置cols可以設置其寬度。
但如果textarea元素中添加了類名“form-control”類名，則無需設置cols屬性。
因爲Bootstrap框架中的“form-control”樣式的表單控件寬度爲100%或auto。
<form role="form">
<div class="form-group">
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
7、複選框checkbox和單選鈕radio：
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</div>
</form>
- 不管是checkbox還是radio都使用label包起來了
- checkbox連同label標籤放置在一個名爲“.checkbox”的容器內
- radio連同label標籤放置在一個名爲“.radio”的容器內
8、水平排列複選框和單選鈕：
- 如果checkbox需要水平排列，只需要在label標籤上添加類名“checkbox-inline”
- 如果radio需要水平排列，只需要在label標籤上添加類名“radio-inline”
<form role="form">
<div class="form-group">
<label class="checkbox-inline">
<input type="checkbox" value="option1">遊戲
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option2">攝影
</label>
<label class="checkbox-inline">
<input type="checkbox" value="option3">旅遊
</label>
</div>
<div class="form-group">
<label class="radio-inline">
<input type="radio" value="option1" name="sex">男性
</label>
<label class="radio-inline">
<input type="radio" value="option2" name="sex">女性
</label>
<label class="radio-inline">
<input type="radio" value="option3" name="sex">中性
</label>
</div>
</form>
9、按鈕
10、表單控件大小：
Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
- input-sm:讓控件比正常大小更小
- input-lg:讓控件比正常大小更大
這兩個類適用於表單中的input，textarea和select控件，具體使用如下：
<input class="form-control input-lg" type="text" placeholder="添加.input-lg，控件變大">
<input class="form-control" type="text" placeholder="正常大小">
<input class="form-control input-sm" type="text" placeholder="添加.input-sm，控件變小">
要控制表單寬度，可以像下面這樣使用：需要藉助網格系統
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
<div class="col-xs-4">
<input class="form-control input-lg" type="text" placeholder=".col-xs-4">
</div>
</div>
…
</form>
11、表單控制狀態：焦點狀態
焦點狀態是通過僞類“:focus”來實現。Bootstrap框架中表單控件的焦點狀態刪除了outline的默認樣式，重新添加陰影效果。
<form role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-6">
<input class="form-control input-lg" type="text" placeholder="不是焦點狀態下效果">
</div>
<div class="col-xs-6">
<input class="form-control input-lg" type="text" placeholder="焦點點狀態下效果">
</div>
</div>
</form>
12、表單禁用：
Bootstrap框架的表單控件的禁用狀態和普通的表單禁用狀態實現方法是一樣的，在相應的表單控件上添加屬性“disabled”。
<input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>
13、表單驗證：
同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。
- .has-warning:警告狀態（黃色）
- .has-error：錯誤狀態（紅色）
- .has-success：成功狀態（綠色）
<form role="form">
<div class="form-group has-success">
<label class="control-label" for="inputSuccess1">成功狀態</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
</div>
<div class="form-group has-warning">
<label class="control-label" for="inputWarning1">警告狀態</label>
<input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態">
</div>
<div class="form-group has-error">
<label class="control-label" for="inputError1">錯誤狀態</label>
<input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態">
</div>
</form>
如果你想讓表單在對應的狀態下顯示 icon 出來，只需要在對應的狀態下添加類名“has-feedback”。
請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功狀態</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
<span class="glyphiconglyphicon-ok form-control-feedback"></span> //注意：要加上這句話，否則顯示不出來
</div>
<div class="form-group has-warning has-feedback">
......
</div>
<div class="form-group has-error has-feedback">
......
</div>
</form>
14、表單提示信息：
在Bootstrap框架中也提供了這樣的效果。使用了一個"help-block"樣式，將提示信息以塊狀顯示，並且顯示在控件底部。
在Bootstrap V2.x版本中還提供了一個行內提示信息，其使用了類名“help-inline”。
<form role="form">
<div class="form-group has-success has-feedback">
<label class="control-label" for="inputSuccess1">成功狀態</label>
<input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" >
<span class="help-block">你輸入的信息是正確的</span>
<span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
…
</form>
15、按鈕button：
（1）注意在每個其他樣式的按鈕中必須添加“.btn”，否則不對。
<button class="btn" type="button">基礎按鈕.btn</button>
<button class="btn btn-default" type="button">默認按鈕.btn-default</button>
<button class="btn btn-primary" type="button">主要按鈕.btn-primary</button>
<button class="btn btn-success" type="button">成功按鈕.btn-success</button>
<button class="btn btn-info" type="button">信息按鈕.btn-info</button>
<button class="btn btn-warning" type="button">警告按鈕.btn-warning</button>
<button class="btn btn-danger" type="button">危險按鈕.btn-danger</button>
<button class="btn btn-link" type="button">鏈接按鈕.btn-link</button>
（2）多標籤支持：
其他標籤也可以時按鈕樣式：但是不建議這樣做！！！
<button class="btn btn-default" type="button">button標籤按鈕</button>
<input type="submit" class="btn btn-default" value="input標籤按鈕"/>
<a href="##" class="btn btn-default">a標籤按鈕</a>
<span class="btn btn-default">span標籤按鈕</span>
<div class="btn btn-default">div標籤按鈕</div>
（3）按鈕大小：
<button class="btn btn-primary btn-lg" type="button">大型按鈕.btn-lg</button>
<button class="btn btn-primary" type="button">正常按鈕</button>
<button class="btn btn-primary btn-sm" type="button">小型按鈕.btn-sm</button>
<button class="btn btn-primary btn-xs" type="button">超小型按鈕.btn-xs</button>
（4）塊狀按鈕：
Bootstrap框架中提供了一個類名“btn-block”。按鈕使用這個類名就可以讓按鈕充滿整個容器，並且這個按鈕不會有任何的padding和margin值。在實際當中，常把這種按鈕稱爲塊狀按鈕。
<button class="btnbtn-primary btn-lg btn-block" type="button">大型按鈕.btn-lg</button>
（5）按鈕狀態：
在Bootstrap框架中針對按鈕的狀態效果主要分爲兩種：活動狀態和禁用狀態。
（1）Bootstrap按鈕的活動狀態主要包括按鈕的懸浮狀態(:hover)，點擊狀態(:active)和焦點狀態（:focus）幾種。
（2）在Bootstrap框架中，要禁用按鈕有兩種實現方式：
- 方法1：在標籤中添加disabled屬性 ——不可禁止按鈕的默認行爲
- 方法2：在元素標籤中添加類名“disabled”——可以禁止按鈕的默認行爲
- “.disabled”樣式不會禁止按鈕的默認行爲，比如說提交和重置行爲等。如果想要讓這樣的禁用按鈕也能禁止按鈕的默認行爲，則需要通過JavaScript這樣的語言來處理。對於<a>標籤也存在類似問題，如果通過類名“.disable”來禁用按鈕，其鏈接行爲是無法禁止。而在元素標籤中添加“disabled”屬性的方法是可以禁止元素的默認行爲的。
16、圖像：
圖像在網頁製作中也是常要用到的元素，在Bootstrap框架中對於圖像的樣式風格提供以下幾種風格：
- img-responsive：響應式圖片，主要針對於響應式設計
- img-rounded：圓角圖片
- img-circle：圓形圖片
- img-thumbnail：縮略圖片
<img alt="140x140" src="http://placehold.it/140x140">
<img class="img-rounded" alt="140x140" src="http://placehold.it/140x140">
<img class="img-circle" alt="140x140" src="http://placehold.it/140x140">
<img class="img-thumbnail" alt="140x140" src="http://placehold.it/140x140">
<img class="img-responsive" alt="140x140" src="http://placehold.it/140x140">