## 表單
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">
~~~
