基本實例
所有設(shè)置了.form-control的類的input蹬蚁，textarea和select都會設(shè)置為width: 100%仲吏。一般將label和input放在一個.form-group中
<form>
<div class='form-group'>
<label></label>
<input class='form-control'>
</div>
</form>
內(nèi)聯(lián)表單：一整個表單顯示在一行
為form添加.form-inline類渣蜗，默認(rèn)只適用于viewport尺寸至少在768px寬度；此時輸入框等設(shè)置為width: auto；可能需要手動設(shè)置寬度删窒；
最好一直設(shè)置label砸彬，可將label元素設(shè)置為.sr-only
<form class='form-inline'>
...
</form>
輸入控件組：.input-group使用
<form class='form-inline'>
<div class='from-group'>
<label class='sr-only'></label>
<div class='input-group'>
<div class='input-group-addon'>$</div>
<input class='form-control'>
<div class='input-group-addon'>.00</div>
</div>
</div>
</form>
水平排列的表單
給表單增加.form-horizontal類颠毙。這樣就會把.form-group表現(xiàn)為柵格系統(tǒng)中的行(row)
<form class='from-horizontal'>
<div class='from-group'>
...
</div>
</form>
被支持的控件
輸入框
正確設(shè)置type屬性后控件被賦予正確的樣式；
type = text, password, datetime, datetime-local, date, month, time, wekk, number, email, url, search, tel, color
文本域
textarea元素可以根據(jù)需要改變rows屬性
多選和單選框
- 默認(rèn)外觀（堆疊在一起）
<div class='checkbox'>
<label>
<input type='checkbox' value=''>
Option1
</label>
</div>
- 內(nèi)聯(lián)單選和多選框
<label class='checkbox-inline'>
<input type='checkbox' id='' value=''>1
</label>
<label class='radio-inline'>
<input type='radio' name='radioOption' id='' value=''>2
</label>
- 不帶label文本的checkbox和radio
使用aria-label隱式的提供label
<div>
<label>
<input type='checkbox' id='' value='' aria-label='...'>
</label>
</div>
下拉列表（select）
<select class="form-control" multiple>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
靜態(tài)控件
在表單中需要將一行純文本與label放在同一行砂碉，使用.form-control-static類即可
<form class='form-horizontal'>
<div class='form-group'>
<label class='col-sm-2 control-label'>Email</label>
<div class='col-sm-10'>
<p class='form-control-static'>email@example.com</p>
</div>
</div>
</form>
焦點狀態(tài)
實現(xiàn)：將原outline樣式移除蛀蜜，然后對:focus賦予box-shadow屬性
禁用狀態(tài)
設(shè)置disabled屬性
被禁用的fieldset
禁用fieldset中的所有控件，但是里面的a元素需要使用js來禁用
瀏覽器兼容性：IE11及以下fleldset不完全支持disabled屬性增蹭；
<fieldset disabled>
<input>
...
</fieldset>
只讀狀態(tài)
設(shè)置readonly屬性
校驗狀態(tài)
給表單控件的父元素滴某，如form-group增加.has-warning, .has-error, .has-success類即可
<div class='from-group has-error'>
<label class='control-label'>
<input class='from-control'>
</div>
添加額外的圖標(biāo)
反饋圖標(biāo)只能使用在文本輸入框元素上；
給父元素設(shè)置.has-feedback滋迈，并增加相應(yīng)的圖標(biāo)
<div class='form-group has-success has-feedback'>
<label class='control-label'>
<input class='form-control'>
<span class='glyphicon glyphicon-ok form-control-feedback'>
</div>
空間尺寸
.input-lg為控件設(shè)置高度
