bootstrap可對(duì)表單設(shè)置的狀態(tài)有哪些

這篇文章主要講解了“bootstrap可對(duì)表單設(shè)置的狀態(tài)有哪些”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“bootstrap可對(duì)表單設(shè)置的狀態(tài)有哪些”吧！

創(chuàng)新互聯(lián)建站-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比懷來網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式懷來網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋懷來地區(qū)。費(fèi)用合理售后完善，10年實(shí)體公司更值得信賴。

bootstrap可對(duì)表單設(shè)置的三種狀態(tài)：1、焦點(diǎn)狀態(tài)，該狀態(tài)告訴用戶可輸入或選擇東西；2、禁用狀態(tài)，該狀態(tài)告訴用戶不可以輸入或選擇東西；3、驗(yàn)證狀態(tài)，該狀態(tài)告訴用戶，其進(jìn)行的操作是否正確。

本教程操作環(huán)境：Windows7系統(tǒng)、bootsrap3.3.7版、DELL G3電腦

Bootstrap中的表單控件狀態(tài)主要有三種：焦點(diǎn)狀態(tài)，禁用狀態(tài)，驗(yàn)證狀態(tài)。

一、焦點(diǎn)狀態(tài)：該狀態(tài)告訴用戶可輸入或選擇東西

焦點(diǎn)狀態(tài)通過偽類“:focus”以實(shí)現(xiàn)。

bootstrap.css相應(yīng)源碼：

.form-control:focus {
    border-color: #66afe9;
    outline: 0;   //刪除了outline的默認(rèn)樣式
    -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="不是焦點(diǎn)狀態(tài)下效果">
<input class="form-control" type="text" placeholder="焦點(diǎn)狀態(tài)下效果">

效果圖如下所示：（焦點(diǎn)狀態(tài)下為藍(lán)色邊框效果）

焦點(diǎn)狀態(tài)下，file、radio、checkbox控件的效果與普通的input空間不完全一樣，因?yàn)閎ootstrap對(duì)它們做了特殊處理。

bootstrap.css相應(yīng)源碼：

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;
}

二、禁用狀態(tài)：該狀態(tài)告訴用戶不可以輸入或選擇東西

禁用狀態(tài)是通過在表單控件上添加"disabled"屬性以實(shí)現(xiàn)。
bootstrap.css相應(yīng)源碼：

.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="不是焦點(diǎn)狀態(tài)下效果">
<input class="form-control" type="text" placeholder="表單已禁用，不能輸入"  disabled>

效果圖如下所示：

說明：禁用狀態(tài)下控件背景色為灰色，且手型變?yōu)椴粶?zhǔn)輸入的形狀，若表單控件不使用類名"form-control"，則禁用的控件只有一個(gè)不準(zhǔn)輸入的手型。

PS：在Bootstrap中，若fieldset設(shè)置了"disabled"屬性，則整個(gè)域都處于被禁用狀態(tài)。

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:對(duì)于一個(gè)禁用的域，若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>

效果圖如下所示：

三、驗(yàn)證狀態(tài)：該狀態(tài)告訴用戶，他們的操作是否正確

在Bootstrap中提供3種驗(yàn)證狀態(tài)樣式：

① .has-success : 成功狀態(tài)（綠色）

② .has-error : 錯(cuò)誤狀態(tài)（紅色）

③ .has-warning : 警告狀態(tài)（黃色）

使用方法：在form-group容器上添加對(duì)應(yīng)的狀態(tài)類名即可。

eg:

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

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

在Bootstrap的表單驗(yàn)證中，不同狀態(tài)會(huì)提供不同的icon,如成功是個(gè)對(duì)號(hào)"√",錯(cuò)誤是個(gè)叉號(hào)"×"等。

若想讓表單在不同狀態(tài)下顯示對(duì)應(yīng)的icon,則只需在對(duì)應(yīng)狀態(tài)下添加類名"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">成功狀態(tài)</label>
        <input type="text" class="form-control" id="inputSuccess" placeholder="成功狀態(tài)" >
        <span class="glyphicon glyphicon-ok form-control-feedback"></span>
    </div>
    <div class="form-group has-warning has-feedback">
        <label class="control-label" for="inputWarning">警告狀態(tài)</label>
        <input type="text" class="form-control" id="inputWarning" placeholder="警告狀態(tài)" >
        <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">錯(cuò)誤狀態(tài)</label>
        <input type="text" class="form-control" id="inputError" placeholder="錯(cuò)誤狀態(tài)" >
        <span class="glyphicon glyphicon-remove form-control-feedback"></span>
　　</div>
</form>

效果如下所示：

說明：從效果圖中可看出，圖標(biāo)都居右。

注：Bootstrap中的圖標(biāo)都是使用@face-face來制作，且必須在表單中添加個(gè)span元素來實(shí)現(xiàn)。

eg:

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

感謝各位的閱讀，以上就是“bootstrap可對(duì)表單設(shè)置的狀態(tài)有哪些”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對(duì)bootstrap可對(duì)表單設(shè)置的狀態(tài)有哪些這一問題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！

名稱欄目：bootstrap可對(duì)表單設(shè)置的狀態(tài)有哪些
分享地址：http://bm7419.com/article30/igisso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、網(wǎng)站內(nèi)鏈、用戶體驗(yàn)、網(wǎng)站維護(hù)、網(wǎng)站策劃、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)