bootstrap可對表單設定哪三種狀態

bootstrap可對表單設定的三種狀態：1、焦點狀態，該狀態告訴使用者可輸入或選擇東西；2、停用狀態，該狀態告訴使用者不可以輸入或選擇東西；3、驗證狀態，該狀態告訴用戶，其進行的操作是否正確。

本教學操作環境：Windows7系統、bootsrap3.3.7版、DELL G3電腦

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>

效果圖如下所示：

#說明：停用狀態下控制項背景色為灰色，且手型變成不准輸入的形狀，若表單控制不使用類別名稱"form-control"，則停用的控制項只有一個不准輸入的手型。

PS：在Bootstrap中，若fieldset設定了"disabled"屬性，則整個域都處於停用狀態。

eg:

<form role="form">
    <fieldset disabled>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">无法选择
            </label>
        </div>
        <button type="submit" class="btnbtn-primary">提交</button>
    </fieldset>
</form>

效果如下圖所示：

#PS:對於一個停用的域，若在legend中有輸入框，則此輸入框是無法被停用的。

eg:

<form role="form">
    <fieldset disabled>
        <legend><input type="text" class="form-control" placeholder="我没被禁用" /></legend>
        <div class="form-group">
            <label for="disabledTextInput">禁用的输入框</label>
            <input type="text" id="disabledTextInput" class="form-control" placeholder="禁止输入">
        </div>
        <div class="form-group">
            <label for="disabledSelect">禁用的下拉框</label>
            <select id="disabledSelect" class="form-control">
                <option>不可选择</option>
            </select>
        </div>
        <div class="checkbox">
            <label>
                <input type="checkbox">无法选择
            </label>
        </div>
        <button type="submit" class="btnbtn-primary">提交</button>
　　</fieldset>
</form>

效果圖如下圖：

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

在Bootstrap中提供3種驗證狀態樣式：

① .has-success :成功狀態（綠色）

② .has-error : 錯誤狀態（紅色）

③ .has-warning : 警告狀態（黃色）

#使用方法：在form -group容器上新增對應的狀態類別名稱即可。

eg:

<form role="form">
    <div class="form-group has-success">
        <label class="control-label" for="inputSuccess1">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess1" placeholder="成功状态" >
    </div>
    <div class="form-group has-warning">
        <label class="control-label" for="inputWarning1">警告状态</label>
        <input type="text" class="form-control" id="inputWarning1" placeholder="警告状态">
    </div>
    <div class="form-group has-error">
        <label class="control-label" for="inputError1">错误状态</label>
        <input type="text" class="form-control" id="inputError1" placeholder="错误状态">
    </div>
</form>

說明：從效果可看出，三種樣式除了顏色不同外，效果都一樣。

在Bootstrap的表單驗證中，不同狀態會提供不同的icon,如成功是個對號"√",錯誤是個叉號"×"等。

若想讓表單在不同狀態下顯示對應的icon,則只需在對應狀態下新增類別名稱"has-feedback"。

PS:類別名稱"has-feedback"要與"has-error"、"has-warning"、"has-success"配合使用。

eg:

<form role="form">
    <div class="form-group has-success has-feedback">
        <label class="control-label" for="inputSuccess">成功状态</label>
        <input type="text" class="form-control" id="inputSuccess" placeholder="成功状态" >
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning">警告状态</label>
        <input type="text" class="form-control" id="inputWarning" placeholder="警告状态" >
        <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
　　</div>
　　<div class="form-group has-error has-feedback">
        <label class="control-label" for="inputError">错误状态</label>
        <input type="text" class="form-control" id="inputError" placeholder="错误状态" >
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
　　</div>
</form>

效果如下圖：

##########：從效果圖中可看出，圖示都居右。 ######附註：Bootstrap中的圖示都是使用@face-face來製作，必須在表單中加入個span元素來實現。 ######eg:######

<span class="glyphicon glyphicon-remove form-control-feedback"></span>

###【相關推薦：《###bootstrap教學###》】###

以上是bootstrap可對表單設定哪三種狀態的詳細內容。更多資訊請關注PHP中文網其他相關文章！