1、輸入框input
bootstrap通過(guò)對(duì)input標(biāo)簽的type屬性進(jìn)行識(shí)別,得到相應(yīng)的格式,所以input標(biāo)簽一定要對(duì)type進(jìn)行指定。另外,還需通過(guò)form-control對(duì)輸入框進(jìn)行規(guī)范統(tǒng)一,此外,可以用placeholder對(duì)框內(nèi)內(nèi)容進(jìn)行初始化。
<form role="form">
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter email">
<input type="text" class="form-control" placeholder="Enter userName">
</div>
</form>
2、下拉選擇框
Bootstrap框架中的下拉選擇框使用和原始的一致,多行選擇設(shè)置multiple屬性的值為multiple。Bootstrap框架會(huì)為這些元素提供統(tǒng)一的樣式風(fēng)格。如:
<form role="form"> //表單格式
<div class="form-group"> //類(lèi):控件群
<select class="form-control"> //每個(gè)控件都需要(表單-控制)類(lèi)
<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"> //多行選擇multiple
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
</div>
</form>
3、文本域(textarea)
文本域和原始使用方法一樣,設(shè)置rows可定義其高度,設(shè)置cols可以設(shè)置其寬度。但如果textarea元素中添加了類(lèi)名“form-control”類(lèi)名,則無(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>