輸入框input
單行輸入框樱衷,常見的文本輸入框棋嘲,也就是input的type屬性值為text。在Bootstrap中使用input時(shí)也必須添加type類型箫老,如果沒有指定type類型封字,將無法得到正確的樣式,因?yàn)锽ootstrap框架都是通過input[ type=“?”](其中?號代表type類型耍鬓,比如說text類型阔籽,對應(yīng)的是input[ type=“text”])的形式來定義樣式的。
<input type="text" class="form-control" placeholder="請輸入用戶名">
下拉選擇框select
Bootstrap框架中的下拉選擇框使用和原始的一致牲蜀,多行選擇設(shè)置multiple屬性的值為multiple笆制。Bootstrap框架會為這些元素提供統(tǒng)一的樣式風(fēng)格。
例:
<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>4</option>
<option>5</option>
</select>
</div>
</form>
文本域textarea
文本域設(shè)置rows可定義其高度涣达,設(shè)置cols可以設(shè)置其寬度在辆。但如果textarea元素中添加了類名“form-control”類名证薇,則無需設(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包起來了
2、checkbox連同label標(biāo)簽放置在一個(gè)名為“.checkbox”的容器內(nèi)
3鸦概、radio連同label標(biāo)簽放置在一個(gè)名為“.radio”的容器內(nèi)
在Bootstrap框架中箩张,主要借助“.checkbox”和“.radio”樣式,來處理復(fù)選框窗市、單選按鈕與標(biāo)簽的對齊方式先慷。
<form role="form">
<div class="checkbox">
<label>
<input type="checkbox" value="">
記住密碼
</label>
</div>
<div class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="love" checked>
喜歡
</div>
<div class="radio">
<label>
<input type="radio" name="optionsRadios" id="optionsRadios2" value="hate">
不喜歡
</label>
</form>