一、輸入框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表單控制項的使用方法，之後還有更多內容會不斷更新，希望大家繼續關注。
