基本实例
所有设置了.form-control的类的input，textarea和select都会设置为width: 100%。一般将label和input放在一个.form-group中
<form>
<div class='form-group'>
<label></label>
<input class='form-control'>
</div>
</form>
内联表单：一整个表单显示在一行
为form添加.form-inline类，默认只适用于viewport尺寸至少在768px宽度；此时输入框等设置为width: auto；可能需要手动设置宽度；
最好一直设置label，可将label元素设置为.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表现为栅格系统中的行(row)
<form class='from-horizontal'>
<div class='from-group'>
...
</div>
</form>
被支持的控件
输入框
正确设置type属性后控件被赋予正确的样式；
type = text, password, datetime, datetime-local, date, month, time, wekk, number, email, url, search, tel, color
文本域
textarea元素可以根据需要改变rows属性
多选和单选框
- 默认外观（堆叠在一起）
<div class='checkbox'>
<label>
<input type='checkbox' value=''>
Option1
</label>
</div>
- 内联单选和多选框
<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>
静态控件
在表单中需要将一行纯文本与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>
焦点状态
实现：将原outline样式移除，然后对:focus赋予box-shadow属性
禁用状态
设置disabled属性
被禁用的fieldset
禁用fieldset中的所有控件，但是里面的a元素需要使用js来禁用
浏览器兼容性：IE11及以下fleldset不完全支持disabled属性；
<fieldset disabled>
<input>
...
</fieldset>
只读状态
设置readonly属性
校验状态
给表单控件的父元素，如form-group增加.has-warning, .has-error, .has-success类即可
<div class='from-group has-error'>
<label class='control-label'>
<input class='from-control'>
</div>
添加额外的图标
反馈图标只能使用在文本输入框元素上；
给父元素设置.has-feedback，并增加相应的图标
<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为控件设置高度
