使用Bootstrap彈出框和警告框插件詳解

今天小編給大家分享的是如何使用Bootstrap彈出框和警告框插件，相信很多人都不太了解，為了讓大家更加了解，所以給大家總結了以下內容，話不多說，一起往下看吧。

一．彈出框
彈出框即點擊一個元素彈出一個包含標題和內容的容器。
//基本用法
<button class="btn btn-lg btn-danger" type="button"
data-toggle="popover"
title="彈出框"
data-content="這是一個彈出框插件">
點擊彈出/隱藏彈出框
</button>

//JavaScript 初始化
$('button').popover();

彈出框插件有很多屬性來配置提示的顯示，具體如下：

$('button').popover({ container : 'body', viewport : {
selector : '#view', padding : 10,
}
});

通過 JavaScript 執行的方法有四個。
//顯示
$('button').popover('show');
//隱藏
$('button').popover('hide');
//反轉顯示和隱藏
$('button').popover('toggle');
//隱藏并銷毀
$('button').popover('destroy');

Popover 插件中事件有兩種。

//事件，其他雷同
$('button').on('show.bs.tab', function () {
alert('調用 show 方法時觸發！');
});

二．警告框
警告框即為點擊小時的信息框。
//基本實例
<div class="alert alert-warning">
<button class="close" type="button" data-dismiss="alert">
<span>&times;</span>
</button>
<p>警告：您的瀏覽器不支持！</p>
</div>

//添加淡入淡出效果
<div class="alert alert-warning fade in">

如果用 JavaScript，可以代替 data-dismiss="alert"
//JavaScript 方法
$('.close').on('click', function () {
$('#alert').alert('close');
})

Alert 插件中事件有四種。

//事件，其他雷同
$('#alert').on('close.bs.alert', function () {
alert('當 close 方法被觸發時調用！');
});

以上就是如何使用Bootstrap彈出框和警告框插件的詳細內容了，文中示例代碼介紹的非常詳細，圖文詳解容易學習，非常適合初學者入門。希望你們能有所收獲。