前言：由於表單的元素比較多，因此將Bootstrap的表單單獨做個總結，表單作為Bootstrap的核心內容，主要功能是用來與用戶做交流的一個網頁控制，良好的表單設計能夠讓網頁與用戶更好的溝通。表單中常見的元素主要包括：文字輸入框、下拉選擇框、單選按鈕、複選按鈕、文字網域和按鈕等。
一、基礎表單
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">邮箱：</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入您的邮箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入您的邮箱密码"> </div> <button type="submit" class="btn btn-default">进入邮箱</button> </form>
具體解釋：
一、基礎表單
<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"> <button type="submit" class="btn btn-default">进入邮箱</button> </div> </div> </form>
具體解釋：
一、基礎表單
<form class="form-inline" role="form"> <div class="form-group"> <label for="exampleInputEmail2">邮箱</label> <input type="email" class="form-control" id="exampleInputEmail2" placeholder="请输入你的邮箱地址"> </div> <div class="form-group"> <label for="exampleInputPassword2">密码</label> <input type="password" class="form-control" id="exampleInputPassword2" placeholder="请输入你的邮箱密码"> </div> <button type="submit" class="btn btn-default">进入邮箱</button> </form>
具體解釋：
（1）form標籤的role屬性，只是為了增強語意性，無其他作用；
（2）設定為div.form-group類別名，是為了讓每個輸入框上下間隔一定的距離，不然兩個就會挨著；
（3）還有label的for屬性和input的id必須同名，是為了標識它倆是一群組，且當滑鼠點選label標籤時，遊標會自動鎖定到輸入框，不用for屬性時也可這樣寫：，此時input的長度不是螢幕寬度；
（4）給form添加.form-control類別:
1.寬度100%顯示；2.設定了一個淺灰色（#ccc）的邊框；
3.具有4px的圓角；
二、水平表單（標籤在左，輸入框在右）
<input type="text" class="form-control">
1、設定表單控制padding和margin值；
2、改變「form-group」的表現形式，類似網格系統的「row」；
三、內聯表單（表單控制項都在一行顯示）
<input type="text" class="form-control input-lg">
具體解釋：
有時我們會用到網頁上方的導覽列輸入使用者名稱和密碼，這時就需要在一行顯示，此時給form標籤新增.form-inline類別就可輕易的實作；同時當改變顯示裝置大小時就會自動發生換行，呈現一般表單的樣式。
四、表單的基本元素
1、input元素：加上類別.form-control就可以實現最基本的輸入框樣式
<input type="text" class="form-control input-sm">
（2）比基本大輸入框
（2）比基本大輸入框（2）比基本大輸入框
（2）比基本大輸入框
（2）比基本大輸入框
（2）比基本大輸入框（2）比基本大輸入框
（2）比基本大輸入框
<textarea rows="5" class="form-control">
<select class="form-control"><option>222</option></select>
`<form role="form"> <div class="checkbox"> <label> <input type="checkbox" value=""> 踢足球 </label> </div> <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="h
