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)文章
關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
下面小編就為大家?guī)?lái)一篇關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06
原生javascript實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
ES6給數(shù)組添加了一些新特性，而這些新特性到目前為止完全可以運(yùn)用到自己的業(yè)務(wù)層。在這一節(jié)中將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法2016-03-03
簡(jiǎn)單時(shí)間提示DEMO從0開(kāi)始一直進(jìn)行計(jì)時(shí)
點(diǎn)擊按鈕輸入框會(huì)從0開(kāi)始一直進(jìn)行計(jì)時(shí)，具體的實(shí)現(xiàn)示例如下，感興趣的朋友可以嘗試操作下哦2013-11-11
js導(dǎo)出table到excel同時(shí)兼容FF和IE示例
js導(dǎo)出table到excel，在百度可以搜索很多的方法，但是其兼容性是相當(dāng)差的，本文制定了一個(gè)可以同時(shí)兼容FF和IE的方法，感興趣的朋友可以參考下2013-09-09
JavaScript簡(jiǎn)單實(shí)現(xiàn)的仿微博留言功能示例
這篇文章主要介紹了JavaScript簡(jiǎn)單實(shí)現(xiàn)的仿微博留言功能,涉及javascript頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
Js調(diào)用Java方法并互相傳參的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Js調(diào)用Java方法并互相傳參的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解
這篇文章主要介紹了更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
本篇文章主要分享了微信小程序拖拽排序的示例代碼。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
Javascript 遍歷對(duì)象中的子對(duì)象
昨天同事問(wèn)我一個(gè)問(wèn)題：“有一個(gè)JSON對(duì)象，其中有若干個(gè)子對(duì)象，如何遍歷這個(gè)對(duì)象中的子對(duì)象？”2009-07-07