## 表单
Bootstrap 提供了一些丰富的表单样式供开发者使用。
### 基本格式
**实现基本的表单样式**
~~~javascript
<form>
<div class="form-group">
<label>电子邮件</label>
<input type="email" class="form-control" placeholder="请输入您的邮箱..." />
</div>
<div class="form-group">
<label>密码</label>
<input type="password" class="form-control" placeholder="请输入您的密码..." />
</div>
</form>
~~~
单独的表单控件会被自动赋予一些全局样式。所有设置了` .form-control` 类的 `<input>`、`<textarea>` 和 `<select>` 元素都将被默认设置宽度属性为 `width: 100%`;。 将 `label` 元素和前面提到的控件包裹在 `.form-group` 中可以获得最好的排列。
### 内联表单
让表单左对齐浮动，并表现为 inline-block 内联块结构
~~~html
<form class="form-inline">
~~~
> 注：当小于 768px，会恢复独占样式
### 表单合组
**前后增加片段**
~~~html
<div class="form-group">
<label>价格</label>
<div class="input-group">
<div class="input-group-addon">$</div>
<input type="text" class="form-control" />
<div class="input-group-addon">.00</div>
</div>
</div>
~~~
> 不要将表单组直接和输入框组混合使用。建议将输入框组嵌套到表单组中使用。
### 水平排列
**让表单内的元素保持水平排列**
~~~html
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的电子邮件">
</div>
</div>
</form>
~~~
> 注：control-label 表示和父元素样式同步。
### 复选框和单选框
~~~html
<div class="checkbox disabled">
<label>
<input type="checkbox" disabled/>体育
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" />音乐
</label>
</div>
<label class="checkbox-inline">
<input type="checkbox" disabled/>体育
</label>
<label class="checkbox-inline">
<input type="checkbox" />音乐
</label>
~~~
### 下拉列表
~~~html
<select class="form-control">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
~~~
### 校验状态
**设置为错误状态**
~~~html
<div class="form-group has-error">
~~~
> 注：还有其他状态如下
|样式 |说明|
|---|---|
|has-error| 错误状态|
|has-success|成功状态|
|has-warning|警告状态|
**label 标签同步相应状态**
~~~html
<label class=" control-label">电子邮件</label>
~~~
### 添加额外的图标
**文本框右侧内置文本图标**
~~~
<div class="form-group has-error has-feedback">
<label class="col-sm-2 control-label">电子邮件</label>
<div class="col-sm-10">
<input type="email" class="form-control" placeholder="请输入您的邮箱..." />
<span class="glyphicon glyphicon-ok form-control-feedback"></span>
</div>
</div>
~~~
|类名 |含义 |
|---|---|
|glyphicon-ok|成功状态|
|glyphicon-warning-sign|警告状态|
|glyphicon-remove|错误状态|
### 控制尺寸
**从大到小**
~~~html
<input type="email" class="form-control input-lg" placeholder="请输入您的邮箱..." />
~~~
> 注：也可以设置父元素 form-group-lg、form-group-sm，来调整。
## 图片
~~~html
<img src="..." alt="..." class="img-rounded">
<img src="..." alt="..." class="img-circle">
<img src="..." alt="..." class="img-thumbnail">
~~~
