全面解析Bootstrap表單使用方法（表單控件）

更新時(shí)間：2015年11月24日 09:27:22 作者：傻籽

這篇文章全面解析了Bootstrap表單的使用方法，本文重點(diǎn)介紹Bootstrap表單控件，感興趣的小伙伴們可以參考一下

一、輸入框input

　　單行輸入框，常見(jiàn)的文本輸入框，也就是input的type屬性值為text。

　　在Bootstrap中使用input時(shí)也必須添加type類型，如果沒(méi)有指定type類型，將無(wú)法得到正確的樣式，因?yàn)锽ootstrap框架都是通過(guò)input[type=“?”]

(其中?號(hào)代表type類型，比如說(shuō)text類型，對(duì)應(yīng)的是input[type=“text”])的形式來(lái)定義樣式的。

　　為了讓控件在各種表單風(fēng)格中樣式不出錯(cuò)，需要添加類名“.form-control”。

<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
</div>
</form>

二、下拉選擇框select

　　Bootstrap框架中的下拉選擇框使用和原始的一致，多行選擇設(shè)置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

　　文本域和原始使用方法一樣，設(shè)置rows可定義其高度，設(shè)置cols可以設(shè)置其寬度。

　　但如果textarea元素中添加了類名“.form-control”類名，則無(wú)需設(shè)置cols屬性。

　　因?yàn)锽ootstrap框架中的“form-control”樣式的表單控件寬度為100%或auto。

 <form role="form">
 <div class="form-group">
 <textarea class="form-control" rows="3"></textarea>
 </div>
 </form>

四、復(fù)選框checkbox和單選擇按鈕radio

　　1、不管是checkbox還是radio都使用label包起來(lái)了
　　2、checkbox連同label標(biāo)簽放置在一個(gè)名為“.checkbox”的容器內(nèi)
　　3、radio連同label標(biāo)簽放置在一個(gè)名為“.radio”的容器內(nèi)

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

五、復(fù)選框和單選按鈕水平排列
　　1、如果checkbox需要水平排列，只需要在label標(biāo)簽上添加類名“.checkbox-inline”
　　2、如果radio需要水平排列，只需要在label標(biāo)簽上添加類名“.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框架還提供了兩個(gè)不同的類名，用來(lái)控制表單控件的高度。這兩個(gè)類名是：
　　1、input-sm:讓控件比正常大小更小
　　2、input-lg:讓控件比正常大小更大
這兩個(gè)類適用于表單中的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，控件變小">