1. 表单元素
概念：
form-control是BootStrap对表单元素设计的基本样式，所有设置了.form-control类的<input>、<textarea>和<select>元素都将被默认设置宽度属性为100%。- 在
<form>标签上使用form-inline可以让表单中的所有元素在一行显示，但是在屏幕小于768px的时候，程序认为是移动端，内联表单会失效。
源码：
<form action="">
<input type="text" class="form-control"/>
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
<textarea class="form-control"/></textarea>
</form>
复制代码2. 输入元素
概念：
<input>支持的type类型包括：text、password、datetime、datetimelocal、date、month、time、week、number、email、url、search、tel、color。- 设置输入元素的尺寸有两种方案：
- 利用
.input-lg或.input-sm直接对单行文本框进行调整。 - 设置单行文本框父元素的
.form-group-lg和.form-group-sm来调整。
- 利用
<form action="">
<input type="text" class="form-control" value="正常"/>
<input type="text" class="form-control input-lg" value="加大"/>
<input type="text" class="form-control input-sm" value="缩小"/>
</form>
<hr/>
<form action="" class="form-group-lg">
<input type="text" class="form-control" value="整体加大"/>
<input type="text" class="form-control" value="整体加大"/>
<input type="text" class="form-control" value="整体加大"/>
</form>
复制代码3. 输入元素组合
概念：
- 有时候我们需要将某些文字和某个输入元素合并为一组，集中处理，这时可以将文字和表单放在同一个
<div class="input-group">中，然后对其中的需要合并的元素设置input-group-addon，即可完成合并。 input-group-addon可以组合文字，它支持组合多个。input-group-btn可以组合按钮，支持组合多个，注意该样式需要设置在按钮的父元素上，不能直接设置在按钮身上。
源码：
<form action="">
<div class="input-group">
<span class="input-group-addon">￥</span>
<input type="text" class="form-control"/>
<span class="input-group-addon">.00</span>
<span class="input-group-addon">元</span>
</div>
<div class="input-group">
<input type="text" class="form-control"/>
<span class="input-group-btn">
<button class="btn btn-success">按钮</button>
</span>
</div>
</form>
复制代码4. 点按元素
概念：
- 复选框添加样式的方式有两种
- 在所有复选框外围嵌套一层
<div class="checkbox">，此时复选框水平排列。 - 在每个复选框外层嵌套一层
<div class="checkbox">，此时复选框竖直排列。
- 在所有复选框外围嵌套一层
- 单选框和复选框一致，将
type="checkbox"换成type="radio"即可。
源码：
<!--让多选框竖直排列-->
<form action="">
<div class="checkbox">
<label><input type="checkbox"/>音乐</label>
</div>
<div class="checkbox">
<label><input type="checkbox"/>魔术</label>
</div>
</form>
<hr/>
<!--让多选框水平排列-->
<form action="">
<div class="checkbox">
<label class="checkbox-inline">
<input type="checkbox"/>
<span>音乐</span>
</label>
<label class="checkbox-inline">
<input type="checkbox"/>
<span>魔术</span>
</label>
</div>
</form>
复制代码一定要在每个元素的外层添加 `<label>` 标签，否则屏幕阅读器将无法正确识别。
5. 表单元素组
概念：
form-group可以对一堆表单元素进行分组整合，但它只对<input>类型的元素有效，对<button>等类型无效。- 一般使用
<div>来统一控制表单组件，此时<div>可以添加一个.form-group来统一管理这个组合，也可以直接在<form>上添加.form-group。
源码：
<section style="width: 200px; margin:0 auto;">
<form action="">
<div class="form-group form-group-lg">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
<div class="form-group form-group-sm">
<input type="text" class="form-control">
<input type="text" class="form-control">
</div>
<button class="btn btn-success btn-block">登录</button>
<button class="btn btn-info btn-block">注册</button>
</form>
</section>
复制代码6. 校验状态
概念：
- 我们可以对表单元素添加一个校验状态，如成功，失败，警告等。
- 我们还可以在表单元素的末尾添加一个校验状态图标，这种图标是字体图标，而非图片，图标的位置应该出现在控件的尾部，此时我们需要使用
has-feedback和form-control-feedback的组合来控制图标的相对位置，因为form-control-feedback会去寻找has-feedback，然后进行定位。
链接： 更多小图标
| 代码 | 描述 |
|---|---|
<div class="form-group has-success"> |
成功 |
<div class="form-group has-error"> |
失败 |
<div class="form-group has-warning"> |
警告 |
源码：
<form action="">
<div class="form-group has-success has-feedback">
<input class="form-control"/>
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-error has-feedback">
<input class="form-control"/>
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
<input class="form-control"/>
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
</div>
</form>
复制代码