全面解析Bootstrap表單使用方法（表單控制項）_javascript技巧

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