完全深入學習Bootstrap表單

前言：由於表單的元素比較多，因此將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的圓角； 

4.設定陰影效果，且元素被聚焦時，陰影和邊框效果會有所變化；

二、水平表單（標籤在左，輸入框在右）

<input type="text" class="form-control">

具體解釋： 

在form標籤上使用類別.form-horizo​​ntal主要有以下作用： 

1、設定表單控制padding和margin值； 
2、改變「form-group」的表現形式，類似網格系統的「row」； 

在使用時必須和網格系統搭配使用，才能達到水平方向的效果，對於不同寬度的裝置顯示不同的佈局，使用時可以調整瀏覽器的大小看不同的效果，當瀏覽器大小小於某個值就會垂直顯示。

三、內聯表單（表單控制項都在一行顯示）

<input type="text" class="form-control input-lg">

具體解釋： 
有時我們會用到網頁上方的導覽列輸入使用者名稱和密碼，這時就需要在一行顯示，此時給form標籤新增.form-inline類別就可輕易的實作；同時當改變顯示裝置大小時就會自動發生換行，呈現一般表單的樣式。

四、表單的基本元素 

1、input元素：加上類別.form-control就可以實現最基本的輸入框樣式 

（1）基本輸入框

<input type="text" class="form-control input-sm">

（2）比基本大輸入框

（2）比基本大輸入框

（2）比基本大輸入框

（2）比基本大輸入框
（2）比基本大輸入框

（2）比基本大輸入框

（2）比基本大輸入框

（2）比基本大輸入框

（2）比基本大輸入框
（2）比基本大輸入框

（2）比基本大輸入框🎜（2）比基本大輸入框🎜（2）比基本大輸入框🎜（2）比基本大輸入框🎜（2）比基本大輸入框🎜（2）比基本大輸入框🎜（2）比基本大輸入框的輸入框🎜🎜

<textarea rows="5" class="form-control">

🎜（3）比基本小的輸入框🎜

<select class="form-control"><option>222</option></select>

🎜2、 textarea元素：加上類別.form-control可以不用設定cols屬性值，此時標籤寬度為100%🎜

`<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

🎜3. 、select元素：與原始一致，作為下拉選擇框，可以實現多行選擇和單行選擇，加上.form-control類別只是為了同一風格🎜rrreee🎜4.、複選框checkbox和單選按鈕radio： 🎜 🎜🎜（1）給checkbox和radio專門寫了.checkbox和.radio這兩個類，是為了解決對齊問題，下面的代碼是垂直顯示🎜rrreee🎜🎜🎜