Bootstrap之表單控件狀態

Bootstrap中的表單控件狀態主要有三種：焦點狀態，禁用狀態，驗證狀態。

 

1、焦點狀態：該狀態告訴用戶可輸入或選擇東西

焦點狀態經過僞類「: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;
}

2、禁用狀態：該狀態告訴用戶不能夠輸入或選擇東西

禁用狀態是經過在表單控件上添加"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>

效果圖以下所示：

說明：禁用狀態下控件背景色爲灰色，且手型變爲不許輸入的形狀，若表單控件不使用類名"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>

效果圖以下所示：

3、驗證狀態：該狀態告訴用戶，他們的操做是否正確

在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>