Bootstrap所支持的表單控件如下所示：
Bootstrap 支持最常見的表單控件，主要是input、textarea、checkbox、radio 和select。
輸入框（Input）
最常見的表單文本字段是輸入框input。用戶可以在其中輸入大多數必要的表單數據。 Bootstrap 提供了對所有原生的HTML5 的input 類型的支持，包括：text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和color。適當的type 聲明是必需的，這樣才能讓input 獲得完整的樣式。
<!DOCTYPE html><html><head><title>Bootstrap 實例- 輸入框</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label for="name">標籤</label><input type="text" placeholder="文本輸入"></div></form></body></html>
結果如下所示：
文本框（Textarea）
當您需要進行多行輸入的時，則可以使用文本框textarea。必要時可以改變rows 屬性。
<!DOCTYPE html><html><head><title>Bootstrap 實例- 文本框</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label for="name">文本框</label><textarea rows="3"></textarea></div></form></body></html>
結果如下所示：
複選框（（Checkbox）和單選框（Radio）
複選框和單選按鈕用於讓用戶從一系列預設置的選項中進行選擇。
當創建表單時，如果您想讓用戶從列表中選擇若干個選項時，請使用checkbox。如果您限制用戶只能選擇一個選項，請使用radio。
對一系列複選框和單選框使用.checkbox-inline 或.radio-inline class，控制它們顯示在同一行上。
下面的實例演示了這兩種類型（默認和內聯）：
<!DOCTYPE html><html><head><title>Bootstrap 實例- 複選框和單選按鈕</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><label for="name">默認的複選框和單選按鈕的實例</label><div><label><input type="checkbox" value="">選項1</label></div><div><label><input type="checkbox" value="">選項2</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> 選項1</label></div><div><label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">選項2 - 選擇它將會取消選擇選項1</label></div><label for="name">內聯的複選框和單選按鈕的實例</label><div><label><input type="checkbox" id="inlineCheckbox1" value="option1"> 選項1</label><label><input type="checkbox" id="inlineCheckbox2" value="option2"> 選項2</label><label><input type="checkbox" id="inlineCheckbox3" value="option3"> 選項3</label><label><input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> 選項1</label><label><input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> 選項2</label></div></body></html>
結果如下所示：
複選框和單選按鈕
當您想讓用戶從多個選項中進行選擇，但是默認情況下只能選擇一個選項時，則使用選擇框。
使用<select> 展示列表選項，通常是那些用戶很熟悉的選擇列表，比如州或者數字。
使用multiple="multiple" 允許用戶選擇多個選項。
下面的實例演示了這兩種類型（select 和multiple）：
<!DOCTYPE html><html><head><title>Bootstrap 實例- 選擇框</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label for="name">選擇列表</label><select><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select><label for="name">可多選的選擇列表</label><select multiple><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option></select></div></form></body></html>
結果如下所示：
靜態控件
當您需要在一個水平表單內的表單標籤後放置純文本時，請在<p> 上使用class .form-control-static。
<!DOCTYPE html><html><head><title>Bootstrap 實例- 靜態控件</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label>Email</label><div><p>[email protected]</p></div></div><div><label for="inputPassword">密碼</label><div><input type="password" id="inputPassword" placeholder="請輸入密碼"></div></div></form></body></html>
結果如下所示：
表單控件狀態
除了:focus 狀態（即，用戶點擊input 或使用tab 鍵聚焦到input 上），Bootstrap 還為禁用的輸入框定義了樣式，並提供了表單驗證的class。
輸入框焦點
當輸入框input 接收到:focus 時，輸入框的輪廓會被移除，同時應用box-shadow。
禁用的輸入框input
如果您想要禁用一個輸入框input，只需要簡單地添加disabled 屬性，這不僅會禁用輸入框，還會改變輸入框的樣式以及當鼠標的指針懸停在元素上時鼠標指針的樣式。
禁用的字段集fieldset
對<fieldset> 添加disabled 屬性來禁用<fieldset> 內的所有控件。
驗證狀態
Bootstrap 包含了錯誤、警告和成功消息的驗證樣式。只需要對父元素簡單地添加適當的class（.has-warning、 .has-error 或.has-success）即可使用驗證狀態。
<!DOCTYPE html><html><head><title>Bootstrap 實例- 表單控件狀態</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><label>聚焦</label><div><input id="focusedInput" type="text" value="該輸入框獲得焦點..."></div></div><div><label for="inputPassword">禁用</label><div><input id="disabledInput" type="text" placeholder="該輸入框禁止輸入..." disabled></div></div><fieldset disabled><div><label for="disabledTextInput">禁用輸入（Fieldset disabled）</label><div><input type="text" id="disabledTextInput" placeholder="禁止輸入"></div></div><div><label for="disabledSelect">禁用選擇菜單（Fieldset disabled）</label><div><select id="disabledSelect"><option>禁止選擇</option></select></div></div></fieldset><div><label for="inputSuccess">輸入成功</label><div><input type="text" id="inputSuccess"></div></div><div><label for="inputWarning">輸入警告</label><div><input type="text" id="inputWarning"></div></div><div><label for="inputError">輸入錯誤</label><div><input type="text" id="inputError"></div></div></form></body></html>
結果如下所示：
表單控件大小
可以分別使用class .input-lg 和.col-lg-* 來設置表單的高度和寬度。下面的實例演示了這點：
<!DOCTYPE html><html><head><title>Bootstrap 實例- 表單控件大小</title><link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"><script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script><script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script></head><body><form role="form"><div><input type="text" placeholder=".input-lg"></div><div><input type="text" placeholder="默認輸入"></div><div><input type="text" placeholder=".input-sm"></div><div></div><div><select><option value="">.input-lg</option></select></div><div><select><option value="">默認選擇</option></select></div><div><select><option value="">.input-sm</option></select></div><div><div><input type="text" placeholder=".col-lg-2"></div><div><input type="text" placeholder=".col-lg-3"></div><div><input type="text" placeholder=".col-lg-4"></div></div></form></body></html>
結果如下所示：
武林網小編給大家推薦相關專題：
BootStrap組件操作技巧
Bootstrap 相關知識匯總
以上就是bootstrap所支持的表單控件。大家都看明白了，有任何疑問歡迎給我留言，小編會及時回復大家的，同時也非常感謝大家對武林網網站的支持