在製作表單時，難免要做表單驗證。同樣也需要提供驗證狀態樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態（黃色）
2、.has-error：錯誤狀態（紅色）
3、.has-success：成功狀態（綠色）
使用的時候只需要在form-group容器上對應添加狀態類名。
<form role="form"><div><label for="inputSuccess1">成功狀態</label><input type="text" id="inputSuccess1" placeholder="成功狀態" ></div><div><label for="inputWarning1">警告狀態</label><input type="text" id="inputWarning1" placeholder="警告狀態"></div><div><label for="inputError1">錯誤狀態</label><input type="text" id="inputError1" placeholder="錯誤狀態"></div></form>
運行效果如下或查看右側結果窗口：
很多時候，在表單驗證的時候，不同的狀態會提供不同的icon，比如成功是一個對號（√），錯誤是一個叉號（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對應的狀態下顯示icon出來，只需要在對應的狀態下添加類名“has-feedback”。請注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：
<form role="form"><div><label for="inputSuccess1">成功狀態</label><input type="text" id="inputSuccess1" placeholder="成功狀態" ><span></span></div><div><label for="inputWarning1">警告狀態</label><input type="text" id="inputWarning1" placeholder="警告狀態"><span></span></div><div><label for="inputError1">錯誤狀態</label><input type="text" id="inputError1" placeholder="錯誤狀態"><span></span></div></form>
運行效果如下或查看右側結果窗口：
從效果圖中可以看出，圖標都居右。在Bootstrap的小圖標都是使用@font-face來製作（後面的內容中將會著重用一節內容來介紹）。而且必須在表單中添加了一個span元素：
<span></span>
以上所述是小編給大家介紹的Bootstrap中表單控件狀態(驗證狀態) ，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！