Bootstrap中的表單控制項狀態主要有三種：焦點狀態，禁用狀態，驗證狀態。 一、焦點狀態：該狀態告訴用戶可輸入或選擇東西 焦點狀態通過偽類“:focus”以實現。 bootstrap.css相應源碼
Bootstrap中的表單控制項狀態主要有三種：焦點狀態，禁用狀態，驗證狀態。
一、焦點狀態：該狀態告訴用戶可輸入或選擇東西 焦點狀態通過偽類“:focus”以實現。 bootstrap.css相應源碼：.form-control:focus { border-color: #66afe9; outline: 0; //刪除了outline的預設樣式 -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); //添加了陰影效果 box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); }使用方法：給控制項添加類名“form-control”。 eg:
<input class="form-control" type="text" placeholder="不是焦點狀態下效果"> <input class="form-control" type="text" placeholder="焦點狀態下效果">效果圖如下所示：（焦點狀態下為藍色邊框效果）
焦點狀態下，file、radio、checkbox控制項的效果與普通的input空間不完全一樣，因為bootstrap對它們做了特殊處理。
bootstrap.css相應源碼：
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; }
二、禁用狀態：該狀態告訴用戶不可以輸入或選擇東西
禁用狀態是通過在表單控制項上添加"disabled"屬性以實現。
bootstrap.css相應源碼：
.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { cursor: not-allowed; background-color: #eee; opacity: 1; }
使用方法：在需要禁用的表單控制項上加上"diabled"屬性即可。
eg:
<input class="form-control" type="text" placeholder="不是焦點狀態下效果"> <input class="form-control" type="text" placeholder="表單已禁用，不能輸入" disabled>
效果圖如下所示：
yn~4.png)
說明：禁用狀態下控制項背景色為灰色，且手型變為不准輸入的形狀，若表單控制項不使用類名"form-control"，則禁用的控制項只有一個不准輸入的手型。
PS：在Bootstrap中，若fieldset設置了"disabled"屬性，則整個域都處於被禁用狀態。
eg:
1 <form role="form"> 2 <fieldset disabled> 3 <div class="form-group"> 4 <label for="disabledTextInput">禁用的輸入框</label> 5 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> 6 </div> 7 <div class="form-group"> 8 <label for="disabledSelect">禁用的下拉框</label> 9 <select id="disabledSelect" class="form-control"> 10 <option>不可選擇</option> 11 </select> 12 </div> 13 <div class="checkbox"> 14 <label> 15 <input type="checkbox">無法選擇 16 </label> 17 </div> 18 <button type="submit" class="btnbtn-primary">提交</button> 19 </fieldset> 20 </form>
效果如下圖所示：
PS:對於一個禁用的域，若legend中有輸入框，則此輸入框是無法被禁用的。
eg:
1 <form role="form"> 2 <fieldset disabled> 3 <legend><input type="text" class="form-control" placeholder="我沒被禁用" /></legend> 4 <div class="form-group"> 5 <label for="disabledTextInput">禁用的輸入框</label> 6 <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止輸入"> 7 </div> 8 <div class="form-group"> 9 <label for="disabledSelect">禁用的下拉框</label> 10 <select id="disabledSelect" class="form-control"> 11 <option>不可選擇</option> 12 </select> 13 </div> 14 <div class="checkbox"> 15 <label> 16 <input type="checkbox">無法選擇 17 </label> 18 </div> 19 <button type="submit" class="btnbtn-primary">提交</button> 20 </fieldset> 21 </form>
效果圖如下所示：
1ky.png)
三、驗證狀態：該狀態告訴用戶，他們的操作是否正確
在Bootstrap中提供3種驗證狀態樣式：
① .has-success : 成功狀態（綠色）
② .has-error : 錯誤狀態（紅色）
③ .has-warning : 警告狀態（黃色）
使用方法：在form-group容器上添加對應的狀態類名即可。
eg:
1 <form role="form"> 2 <div class="form-group has-success"> 3 <label class="control-label" for="inputSuccess1">成功狀態</label> 4 <input type="text" class="form-control" id="inputSuccess1" placeholder="成功狀態" > 5 </div> 6 <div class="form-group has-warning"> 7 <label class="control-label" for="inputWarning1">警告狀態</label> 8 <input type="text" class="form-control" id="inputWarning1" placeholder="警告狀態"> 9 </div> 10 <div class="form-group has-error"> 11 <label class="control-label" for="inputError1">錯誤狀態</label> 12 <input type="text" class="form-control" id="inputError1" placeholder="錯誤狀態"> 13 </div> 14 </form>
說明：從效果可看出，三種樣式除了顏色不同外，效果都一樣。
在Bootstrap的表單驗證中，不同狀態會提供不同的icon,如成功是個對號"√",錯誤是個叉號"×"等。
若想讓表單在不同狀態下顯示對應的icon,則只需在對應狀態下添加類名"has-feedback"。
PS:類名"has-feedback"要與"has-error"、"has-warning"、"has-success"配合使用。
eg:
1 <form role="form"> 2 <div class="form-group has-success has-feedback"> 3 <label class="control-label" for="inputSuccess">成功狀態</label> 4 <input type="text" class="form-control" id="inputSuccess" placeholder="成功狀態" > 5 <span class="glyphicon glyphicon-ok form-control-feedback"></span> 6 </div> 7 <div class="form-group has-warning has-feedback"> 8 <label class="control-label" for="inputWarning">警告狀態</label> 9 <input type="text" class="form-control" id="inputWarning" placeholder="警告狀態" > 10 <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span> 11 </div> 12 <div class="form-group has-error has-feedback"> 13 <label class="control-label" for="inputError">錯誤狀態</label> 14 <input type="text" class="form-control" id="inputError" placeholder="錯誤狀態" > 15 <span class="glyphicon glyphicon-remove form-control-feedback"></span> 16 </div> 17 </form>
效果如下所示：
說明：從效果圖中可看出，圖標都居右。
註：Bootstrap中的圖標都是使用@face-face來製作，且必須在表單中添加個span元素來實現。
eg:
<span class="glyphicon glyphicon-remove form-control-feedback"></span>
