Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài))
在制作表單時(shí)，難免要做表單驗(yàn)證。同樣也需要提供驗(yàn)證狀態(tài)樣式，在Bootstrap框架中同樣提供這幾種效果。
1、.has-warning:警告狀態(tài)（黃色）
2、.has-error：錯(cuò)誤狀態(tài)（紅色）
3、.has-success：成功狀態(tài)（綠色）
使用的時(shí)候只需要在form-group容器上對(duì)應(yīng)添加狀態(tài)類名。
<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>
運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：
很多時(shí)候，在表單驗(yàn)證的時(shí)候，不同的狀態(tài)會(huì)提供不同的icon，比如成功是一個(gè)對(duì)號(hào)（√），錯(cuò)誤是一個(gè)叉號(hào)（×）等。在Bootstrap框中也提供了這樣的效果。如果你想讓表單在對(duì)應(yīng)的狀態(tài)下顯示icon出來(lái)，只需要在對(duì)應(yīng)的狀態(tài)下添加類名“has-feedback”。請(qǐng)注意，此類名要與“has-error”、“has-warning”和“has-success”在一起：
<form role="form"> <div class="form-group has-success has-feedback"> <label class="control-label" for="inputSuccess1">成功狀態(tài)</label> <input type="text" class="form-control" id="inputSuccess1" 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="inputWarning1">警告狀態(tài)</label> <input type="text" class="form-control" id="inputWarning1" 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="inputError1">錯(cuò)誤狀態(tài)</label> <input type="text" class="form-control" id="inputError1" placeholder="錯(cuò)誤狀態(tài)"> <span class="glyphicon glyphicon-remove form-control-feedback"></span> </div> </form>
運(yùn)行效果如下或查看右側(cè)結(jié)果窗口：
從效果圖中可以看出，圖標(biāo)都居右。在Bootstrap的小圖標(biāo)都是使用@font-face來(lái)制作（后面的內(nèi)容中將會(huì)著重用一節(jié)內(nèi)容來(lái)介紹）。而且必須在表單中添加了一個(gè)span元素：
<span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
以上所述是小編給大家介紹的Bootstrap中表單控件狀態(tài)(驗(yàn)證狀態(tài)) ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了VsCode插件整理（小結(jié)），小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
TypeScript中定義變量方式以及數(shù)據(jù)類型詳解
TypeScript支持 JavaScript的所有語(yǔ)法和語(yǔ)義,同時(shí)通過(guò)作為ECMAScript的超集來(lái)提供一些額外的功能,如類型檢測(cè)和更豐富的語(yǔ)法,這篇文章主要給大家介紹了關(guān)于TypeScript中定義變量方式以及數(shù)據(jù)類型詳解的相關(guān)資料,需要的朋友可以參考下2022-08-08
分享XmlHttpRequest調(diào)用Webservice的一點(diǎn)心得
因?yàn)轫?xiàng)目需要，以后前端、手機(jī)客戶端調(diào)用ASP.NET的Webservice來(lái)獲取信息.所以這段時(shí)間開(kāi)始看Webservice，試著通過(guò)XmlHttpRequest調(diào)用Webservice，過(guò)程中碰到不少問(wèn)題，也有不少的收獲2012-07-07
微信企業(yè)號(hào)開(kāi)發(fā)之微信考勤Cookies的使用
使用微信考勤，每次使用微信企業(yè)號(hào)開(kāi)發(fā):微信用戶信息和web網(wǎng)頁(yè)的session的關(guān)系這個(gè)里邊的方法，調(diào)用微信的接口，有點(diǎn)慢，微信官方也推薦使用Cookies，但如何使用Cookies，自己卻一直沒(méi)有搞清楚。下面小編幫大家解決難題，需要的朋友可以參考下2015-09-09
select自定義小三角樣式代碼（實(shí)用總結(jié)）
這篇文章主要介紹了select自定義小三角樣式，通過(guò)css HTML js 代碼詳細(xì)展示了操作過(guò)程，自定義小三角樣式，也可以做出select文字居中的效果,需要的朋友可以參考下2017-08-08
這篇文章主要給大家介紹了關(guān)于es6中reduce的基本使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用es6具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
什么是cookie?js手動(dòng)創(chuàng)建和存儲(chǔ)cookie
cookie 是存儲(chǔ)于訪問(wèn)者的計(jì)算機(jī)中的變量，在這個(gè)例子中我們要?jiǎng)?chuàng)建一個(gè)存儲(chǔ)訪問(wèn)者名字的 cookie,需要的朋友可以參考下2014-05-05
javascript用函數(shù)實(shí)現(xiàn)對(duì)象的方法
這篇文章主要介紹了javascript用函數(shù)實(shí)現(xiàn)對(duì)象的方法,涉及javascript函數(shù)使用技巧,需要的朋友可以參考下2015-05-05
結(jié)合ES6?編寫?JavaScript?設(shè)計(jì)模式中的結(jié)構(gòu)型模式
這篇文章主要介紹了結(jié)合ES6編寫JavaScript?設(shè)計(jì)模式中的結(jié)構(gòu)型模式，設(shè)計(jì)模式是軟件設(shè)計(jì)中常見(jiàn)問(wèn)題的解決方案，這些模式很容易重復(fù)使用并且富有表現(xiàn)力2022-07-07
微信小程序頁(yè)面滾動(dòng)到指定位置代碼實(shí)例
這篇文章主要介紹了微信小程序頁(yè)面滾動(dòng)到指定位置代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09