一、輸入框input
單行輸入框，常見的文本輸入框，也就是input的type屬性值為text。
在Bootstrap中使用input時也必須添加type類型，如果沒有指定type類型，將無法得到正確的樣式，因為Bootstrap框架都是通過input[type=“?”]
(其中?號代表type類型，比如說text類型，對應的是input[type=“text”])的形式來定義樣式的。
為了讓控件在各種表單風格中樣式不出錯，需要添加類名“.form-control”。
<form role="form"> <div class="form-group"> <input type="email" class="form-control" placeholder="Enter email"> </div> </form>
二、下拉選擇框select
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>
三、文本域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>
四、復選框checkbox和單選擇按鈕radio
1、不管是checkbox還是radio都使用label包起來了
2、checkbox連同label標簽放置在一個名為“.checkbox”的容器內
3、radio連同label標簽放置在一個名為“.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>
五、復選框和單選按鈕水平排列
1、如果checkbox需要水平排列，只需要在label標簽上添加類名“.checkbox-inline”
2、如果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>
六、表單控件大小
Bootstrap框架還提供了兩個不同的類名，用來控制表單控件的高度。這兩個類名是：
1、input-sm:讓控件比正常大小更小
2、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，控件變小">
如果大家還想深入學習，可以點擊這裡進行學習，再為大家附兩個精彩的專題：Bootstrap學習教程 Bootstrap實戰教程
以上就是Bootstrap表單控件的使用方法，之後還有更多內容會不斷更新，希望大家繼續關注。