亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

directory search
Bootstrap 基礎(chǔ)教程 Bootstrap 環(huán)境安裝 Bootstrap 教程 Bootstrap CSS Bootstrap CSS 概覽 Bootstrap 按鈕 Bootstrap 表單 Bootstrap 表格 Bootstrap 代碼 Bootstrap 輔助類 Bootstrap 排版 Bootstrap 圖片 Bootstrap 網(wǎng)格系統(tǒng) Bootstrap 網(wǎng)格系統(tǒng)實例：堆疊的水平 Bootstrap 網(wǎng)格系統(tǒng)實例：手機、平板電腦、臺式電腦 Bootstrap 網(wǎng)格系統(tǒng)實例：中型和大型設(shè)備 Bootstrap 響應(yīng)式實用工具 Bootstrap 布局組件 Bootstrap Well Bootstrap 按鈕下拉菜單 Bootstrap 按鈕組 Bootstrap 標簽 Bootstrap 超大屏幕（Jumbotron） Bootstrap 導(dǎo)航欄 Bootstrap 導(dǎo)航元素 Bootstrap 多媒體對象（Media Object） Bootstrap 分頁 Bootstrap 徽章（Badges） Bootstrap 進度條 Bootstrap 警告（Alerts） Bootstrap 列表組 Bootstrap 面板（Panels） Bootstrap 面包屑導(dǎo)航（Breadcrumbs） Bootstrap 輸入框組 Bootstrap 縮略圖 Bootstrap 下拉菜單（Dropdowns） Bootstrap 頁面標題（Page Header） Bootstrap 字體圖標(Glyphicons) Bootstrap 插件 Bootstrap 按鈕（Button） Bootstrap 標簽頁（Tab） Bootstrap 插件概覽 Bootstrap 彈出框（Popover） Bootstrap 附加導(dǎo)航（Affix） Bootstrap 滾動監(jiān)聽（Scrollspy） Bootstrap 過渡效果（Transition） Bootstrap 警告框（Alert） Bootstrap 輪播（Carousel） Bootstrap 模態(tài)框（Modal）插件 Bootstrap 提示工具（Tooltip） Bootstrap 下拉菜單（Dropdown） Bootstrap 折疊（Collapse） Bootstrap 附錄 Bootstrap CSS編碼規(guī)范 Bootstrap HTML編碼規(guī)范 Bootstrap UI 編輯器
characters

Bootstrap 警告框（Alert）

警告框（Alert）消息大多是用來想終端用戶顯示諸如警告或確認消息的信息。使用警告框（Alert）插件，您可以向所有的警告框消息添加可取消（dismiss）功能。

如果您想要單獨引用該插件的功能，那么您需要引用 alert.js?；蛘?，正如 Bootstrap 插件概覽 一章中所提到，您可以引用 bootstrap.js 或壓縮版的 bootstrap.min.js。

用法

您可以有以下兩種方式啟用警告框的可取消（dismissal）功能：

  • 通過 data 屬性：通過數(shù)據(jù) API（Data API）添加可取消功能，只需要向關(guān)閉按鈕添加 data-dismiss="alert"，就會自動為警告框添加關(guān)閉功能。 
    <a?class="close"?data-dismiss="alert"?href="#"?aria-hidden="true">
???&times;
</a>
  • 通過 JavaScript：通過 JavaScript 添加可取消功能： 
    $(".alert").alert()

實例

下面的實例演示了通過 data 屬性使用警告框（Alert）插件的用法。

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?警告框（Alert）插件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?class="alert?alert-warning">
???<a?href="#"?class="close"?data-dismiss="alert">
??????&times;
???</a>
???<strong>警告！</strong>您的網(wǎng)絡(luò)連接有問題。
</div>

</body>
</html>

結(jié)果如下所示：

警告框（Alert）插件

選項

沒有選項。

方法

下面是一些警告框（Alert）插件中有用的方法：

方法 描述 實例
.alert() 該方法讓所有的警告框都帶有關(guān)閉功能。 
$('#identifier').alert();
Close Method .alert('close') 關(guān)閉所有的警告框。 
$('#identifier').alert('close');
如需在關(guān)閉時啟用動畫效果，請確保添加了 .fade 和 .in class。

實例

下面的實例演示了 .alert() 方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?警告框（Alert）插件?alert()?方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h3>警告框（Alert）插件?alert()?方法</h3>
<div?id="myAlert"?class="alert?alert-success">
???<a?href="#"?class="close"?data-dismiss="alert">&times;</a>
???<strong>成功！</strong>結(jié)果是成功的。
</div>
<div?id="myAlert"?class="alert?alert-warning">
???<a?href="#"?class="close"?data-dismiss="alert">&times;</a>
???<strong>警告！</strong>您的網(wǎng)絡(luò)連接有問題。
</div>

<script?type="text/javascript">
$(function(){
???$(".close").click(function(){
??????$("#myAlert").alert();
???});
});??
</script>?

</body>
</html>

下面的實例演示了 .alert('close') 方法的用法：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?警告框（Alert）插件?alert('close')?方法</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<h3>警告框（Alert）插件?alert('close')?方法</h3>
<div?id="myAlert"?class="alert?alert-success">
???<a?href="#"?class="close"?data-dismiss="alert">&times;</a>
???<strong>成功！</strong>結(jié)果是成功的。
</div>
<div?id="myAlert"?class="alert?alert-warning">
???<a?href="#"?class="close"?data-dismiss="alert">&times;</a>
???<strong>警告！</strong>您的網(wǎng)絡(luò)連接有問題。
</div>

<script?type="text/javascript">
$(function(){
???$(".close").click(function(){
??????$("#myAlert").alert('close');
???});
});??

</script>???

</body>
</html>

您可以看到所有的警告框都應(yīng)用了關(guān)閉功能，即關(guān)閉任意的警告框，其他剩余的警告框也會被關(guān)閉。

事件

下表列出了警告框（Alert）插件中要用到的事件。這些事件可在函數(shù)中當鉤子使用。

事件 描述 實例
close.bs.alert 當調(diào)用 close 實例方法時立即觸發(fā)該事件。 
$('#myalert').bind('close.bs.alert',?function?()?{
??//?執(zhí)行一些動作...
})
closed.bs.alert 當警告框被關(guān)閉時觸發(fā)該事件（將等待 CSS 過渡效果完成）。 
$('#myalert').bind('closed.bs.alert',?function?()?{
??//?執(zhí)行一些動作...
})

實例

下面的實例演示了警告框（Alert）插件的事件：

<!DOCTYPE?html>
<html>
<head>
???<title>Bootstrap?實例?-?警告框（Alert）插件事件</title>
???<link?href="/bootstrap/css/bootstrap.min.css"?rel="stylesheet">
???<script?src="/scripts/jquery.min.js"></script>
???<script?src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>

<div?id="myAlert"?class="alert?alert-success">
???<a?href="#"?class="close"?data-dismiss="alert">&times;</a>
???<strong>成功！</strong>結(jié)果是成功的。
</div>

<script?type="text/javascript">
$(function(){
???$("#myAlert").bind('closed.bs.alert',?function?()?{
??????alert("警告消息框被關(guān)閉。");
???});
});
</script>??

</body>
</html>

結(jié)果如下所示：

警告框（Alert）插件事件
Previous article： Next article：