在制作表單時(shí)，不免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯(cuò)誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時(shí)候只需要在form-group容器上對(duì)應(yīng)添加狀態(tài)類(lèi)名。

<form role="form">
<div class="form-group has-success">
  <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
</div>
<div class="form-group has-warning">
  <label class="control-label" for="inputWarning1">警告狀態(tài)</label>
  <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態(tài)">
</div>
<div class="form-group has-error">
  <label class="control-label" for="inputError1">錯(cuò)誤狀態(tài)</label>
  <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)">
</div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

從效果可以看出，三種狀態(tài)下效果都是一樣的，只是顏色不一樣而以。

其他兩種狀態(tài)省略源碼不在此展示。
很多時(shí)候，在表單驗(yàn)證的時(shí)候，不同的狀態(tài)會(huì)提供不同的 icon，比如成功是一個(gè)對(duì)號(hào)（√），錯(cuò)誤是一個(gè)叉號(hào)（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對(duì)應(yīng)的狀態(tài)下顯示 icon 出來(lái)，只需要在對(duì)應(yīng)的狀態(tài)下添加類(lèi)名“has-feedback”。請(qǐng)注意，此類(lèi)名要與“has-error”、“has-warning”和“has-success”在一起：

<form role="form">
<div class="form-group has-success has-feedback">
  <label class="control-label" for="inputSuccess1">成功狀態(tài)</label>
  <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態(tài)" >
  <span class="glyphiconglyphicon-ok form-control-feedback"></span>
</div>
<div class="form-group has-warning has-feedback">
  ......
</div>
<div class="form-group has-error has-feedback">
  ......
</div>
</form>

運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：

從效果圖中可以看出，圖標(biāo)都居右。在 Bootstrap 的小圖標(biāo)都是使用@font-face來(lái)制作（后面的內(nèi)容中將會(huì)著重用一節(jié)內(nèi)容來(lái)介紹）。而且必須在表單中添加了一個(gè) span 元素：

<span class="glyphiconglyphicon-warning-sign form-control-feedback"></span>