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

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

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

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

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

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

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

Popover 插件中事件有兩種。

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

二．警告框
警告框即為點(diǎn)擊小時(shí)的信息框。
//基本實(shí)例
<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('當(dāng) close 方法被觸發(fā)時(shí)調(diào)用！');
});

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