警告框(Alert)消息大多是用來想終端用戶顯示諸如警告或確認消息的信息。使用警告框(Alert)插件,您可以向所有的警告框消息添加可取消(dismiss)功能。
如果您想要單獨引用該插件的功能,那麼您需要引用alert.js。或者,正如Bootstrap 插件概覽一章中所提到,您可以引用bootstrap.js 或壓縮版的bootstrap.min.js。
一、用法
您可以有以下兩種方式啟用警告框的可取消(dismissal)功能:
1、通過data 屬性:通過數據API(Data API)添加可取消功能,只需要向關閉按鈕添加data-dismiss="alert",就會自動為警告框添加關閉功能。
<a data-dismiss="alert" href="#" aria-hidden="true"> ×</a>
2、通過JavaScript:通過JavaScript 添加可取消功能:
$(".alert").alert()
二、簡單實例
警告框即為點擊小時的信息框。
1、基本實例
<div> <button type="button" data-dismiss="alert"> <span>×</span> </button> <p> 警告:您的瀏覽器不支持! </p> </div>
2、添加淡入淡出效果
<div>
如果用JavaScript,可以代替data-dismiss="alert"
//JavaScript 方法$('.close').on('click', function() { $('#alert').alert('close');})Alert 插件中事件有兩種:
//事件,其他雷同$('#alert').on('close.bs.alert', function() { alert('當close 方法被觸發時調用!');});本文系列教程整理到:Bootstrap基礎教程專題中,歡迎點擊學習。
如果大家還想深入學習,可以點擊這裡進行學習,再為大家附3個精彩的專題:
Bootstrap學習教程
Bootstrap實戰教程
Bootstrap插件使用教程
以上就是本文的全部內容,希望對大家學習Bootstrap警告框插件有所幫助。