bootstrap警告框使用方法解析
警告框(Alert)消息大多是用來(lái)想終端用戶顯示諸如警告或確認(rèn)消息的信息。使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。
警告框(Alert)
樣式文件:
LESS版本:源文件 alerts.less
警告框–結(jié)構(gòu)與樣式
<div class="alert alert-success" role="alert"> <button class="close" data-dismiss="alert" type="button" >×</button> <p>恭喜您操作成功!</p> </div>
警告框–使用聲明式觸發(fā)警告框
擊X會(huì)關(guān)閉整個(gè)警告框。
其實(shí)關(guān)閉按鈕,不一定非要用X號(hào),也可以是普通的按鈕元素或者鏈接元素,只需要保證關(guān)閉元素帶有自定義屬性data-dismiss=”alert”即可。
<h3>使用a標(biāo)簽作為關(guān)閉按鈕</h3> <div class="alert alert-warning" role="alert"> <h4>謹(jǐn)防被騙</h4> <p>請(qǐng)確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友,不要輕意相信不認(rèn)識(shí)的人...</p> <a href="#" class="btn btn-danger" data-dismiss="alert">關(guān)閉</a> </div>
警告框–JavaScript觸發(fā)警告框
通過(guò)自定義data-dismiss=”alert”屬性來(lái)觸發(fā)警告框關(guān)閉之外,還可以通過(guò)JavaScript方法。只需要在關(guān)閉按鈕上綁定一個(gè)事件
<div class="alert alert-warning" role="alert" id="myAlert"> <h4>謹(jǐn)防被騙</h4> <p>請(qǐng)確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友,不要輕意相信不認(rèn)識(shí)的人...</p> <button type="button" class="btnbtn-danger" id="close">關(guān)閉</button> </div> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <script> $(function(){ $("#close").on("click",function(){ $(this).alert("close"); }); }); </script>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js比較兩個(gè)單獨(dú)的數(shù)組或?qū)ο笫欠裣嗟鹊膶?shí)例代碼
本文通過(guò)實(shí)例代碼給大家介紹了js比較兩個(gè)單獨(dú)的數(shù)組或?qū)ο笫欠裣嗟?,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04JS辨別訪問(wèn)瀏覽器判斷是android還是ios系統(tǒng)
掃描二維碼之后自動(dòng)分辨出是android還是ios系統(tǒng),因此就要用JS辨別訪問(wèn)瀏覽器針對(duì)于不同的系統(tǒng)進(jìn)行不同的下載,需要的朋友可以參考下2014-08-08JS+CSS實(shí)現(xiàn)簡(jiǎn)易實(shí)用的滑動(dòng)門菜單效果
這篇文章主要介紹了JS+CSS實(shí)現(xiàn)簡(jiǎn)易實(shí)用的滑動(dòng)門菜單效果,涉及JavaScript鼠標(biāo)事件及頁(yè)面元素遍歷的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09JavaScript數(shù)組,JSON對(duì)象實(shí)現(xiàn)動(dòng)態(tài)添加、修改、刪除功能示例
這篇文章主要介紹了JavaScript數(shù)組,JSON對(duì)象實(shí)現(xiàn)動(dòng)態(tài)添加、修改、刪除功能,結(jié)合實(shí)例形式分析了JavaScript針對(duì)json數(shù)組的添加、刪除、修改操作實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-05-05網(wǎng)絡(luò)之美 JavaScript中Get和Set訪問(wèn)器的實(shí)現(xiàn)代碼
前兩天IE9 Beta版發(fā)布了,對(duì)于從事Web開(kāi)發(fā)的朋友們來(lái)說(shuō)真是個(gè)好消息啊,希望將來(lái)有一天各個(gè)瀏覽器都能遵循統(tǒng)一的標(biāo)準(zhǔn)。今天要和大家分享的是JavaScript中的Get和Set訪問(wèn)器,和C#中的訪問(wèn)器非常相似。2010-09-09JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法
這篇文章主要介紹了JS實(shí)現(xiàn)FLASH幻燈片圖片切換效果的方法,實(shí)例分析了javascript操作圖片實(shí)現(xiàn)Flash幻燈效果的技巧,需要的朋友可以參考下2015-03-03layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法
今天小編就為大家分享一篇layer插件實(shí)現(xiàn)在彈出層中彈出一警告提示并關(guān)閉彈出層的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09不能再簡(jiǎn)單的無(wú)閃刷新驗(yàn)證碼原理很簡(jiǎn)單
不能再簡(jiǎn)單的無(wú)閃刷新驗(yàn)證碼原理很簡(jiǎn)單...2007-11-11微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型(附完整案例)
這篇文章主要介紹了微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型(附完整案例),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04