bootstrap警告框使用方法解析
更新時間：2017年01月13日 11:03:10 投稿：lijiao
這篇文章主要為大家詳細(xì)介紹了bootstrap警告框使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
警告框（Alert）消息大多是用來想終端用戶顯示諸如警告或確認(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會關(guān)閉整個警告框。
其實(shí)關(guān)閉按鈕，不一定非要用X號，也可以是普通的按鈕元素或者鏈接元素，只需要保證關(guān)閉元素帶有自定義屬性data-dismiss=”alert”即可。
<h3>使用a標(biāo)簽作為關(guān)閉按鈕</h3> <div class="alert alert-warning" role="alert"> <h4>謹(jǐn)防被騙</h4> <p>請確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識的人...</p> <a href="#" class="btn btn-danger" data-dismiss="alert">關(guān)閉</a> </div>
警告框–JavaScript觸發(fā)警告框
通過自定義data-dismiss=”alert”屬性來觸發(fā)警告框關(guān)閉之外，還可以通過JavaScript方法。只需要在關(guān)閉按鈕上綁定一個事件
<div class="alert alert-warning" role="alert" id="myAlert">
<h4>謹(jǐn)防被騙</h4>
<p>請確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識的人...</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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
關(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
下面小編就為大家?guī)硪黄P(guān)于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-06-06
這篇文章主要為大家詳細(xì)介紹了原生javascript實(shí)現(xiàn)分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
JavaScript學(xué)習(xí)筆記之ES6數(shù)組方法
ES6給數(shù)組添加了一些新特性，而這些新特性到目前為止完全可以運(yùn)用到自己的業(yè)務(wù)層。在這一節(jié)中將總結(jié)有關(guān)于ES6給數(shù)組提供一些新特性的使用方法2016-03-03
點(diǎn)擊按鈕輸入框會從0開始一直進(jìn)行計(jì)時，具體的實(shí)現(xiàn)示例如下，感興趣的朋友可以嘗試操作下哦2013-11-11
js導(dǎo)出table到excel同時兼容FF和IE示例
js導(dǎo)出table到excel，在百度可以搜索很多的方法，但是其兼容性是相當(dāng)差的，本文制定了一個可以同時兼容FF和IE的方法，感興趣的朋友可以參考下2013-09-09
JavaScript簡單實(shí)現(xiàn)的仿微博留言功能示例
這篇文章主要介紹了JavaScript簡單實(shí)現(xiàn)的仿微博留言功能,涉及javascript頁面元素屬性動態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-01-01
Js調(diào)用Java方法并互相傳參的簡單實(shí)例
下面小編就為大家?guī)硪黄狫s調(diào)用Java方法并互相傳參的簡單實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解
這篇文章主要介紹了更優(yōu)雅的微信小程序骨架屏實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-08-08
本篇文章主要分享了微信小程序拖拽排序的示例代碼。具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01
昨天同事問我一個問題：“有一個JSON對象，其中有若干個子對象，如何遍歷這個對象中的子對象？”2009-07-07