本篇文章讨论Bootstrap的js插件的通知消息(bootstrap-alert.js)，也可叫警告框，完成的功能是当用户点击关闭按钮时，将警告框隐藏起来，功能很简单。
接下来看看如何使用。
引入文件
<link href="http://www.see-source.com/bootstrap/css/bootstrap.css" rel="stylesheet"> <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/jquery.js"></script> <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-alert.js"></script> <script type="text/javascript" src="http://www.see-source.com/bootstrap/js/bootstrap-transition.js"></script>可以引入过渡效果插件bootstrap-transition.js使警告框关闭过程缓慢进行。
基本用法
有俩种方式创建：标记法、js代码。实际上，Bootstrap的所有插件都提供了这俩种方式创建。
1.使用标记
只须对关闭按钮添加 data-dismiss="alert" 即可，关闭按钮可以是按钮、超链接或任何其他的dom元素。关闭时会将关闭按钮及关闭按钮的直接父元素一同隐藏。另外，Bootstrap也实现了一些典型的警告框样式，我们就用这些样式做个demo：
demo1
Html代码
<div class="alert fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<strong>警告！</strong> 在贵国遵守宪法就要违反刑法。
</div>
.alert类样式定义了整个警告框的样式。.fade是个控制样式，用于控制是否需要过渡效果，当这个样式存在时加过渡效果。.in 用于控制初始时是否显示警告框。 demo2
Html代码
<div class="alert alert-block alert-error fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<h4 class="alert-heading">微博控们注意了！</h4>
<p>
出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！”
</p>
<p>
<a class="btn btn-danger" href="#">接受建议</a> <a class="btn" href="#">不当回事</a>
</p>
</div>
另一种样式，其中带有操作按钮。
2.使用js代码
可以使用如下的代码关闭警告框，其中的选择器指向关闭按钮。
$(选择器).alert('close')
注：上面代码并不能为关闭按钮绑定单击事件，我们需要手工添加。
demo如下：
Html代码
<div class="alert fade in">
<a class="close" href="#">×</a>
<strong>警告！</strong> 在贵国遵守宪法就要违反刑法。
</div>
Js代码
<script type="text/javascript">
$('.close').on('click', function () {
$(this).alert('close');
})
</script>
使用事件监听
有俩个事件用于对关闭过程进行监听。
| 事件 | 描述 |
|---|---|
| close | 用户触发关闭按钮时该事件立即触发。 |
| closed | 过渡效果完成后立即触发，如果没有过度效果则在close事件后立即触发。 |
绑定事件
$('选择器').on('close', function () {
alert("事件close");
})
上面代码绑定一个close事件，注意，选择器要指向关闭按钮的父元素而不是关闭按钮。如下实例：
Html代码
<div class="alert fade in">
<a class="close" data-dismiss="alert" href="#">×</a>
<strong>警告！</strong> 在贵国遵守宪法就要违反刑法。
</div>
Js代码
<script type="text/javascript">
$('.alert').on('close', function () {
alert("事件close");
})
$('.alert').on('closed', function () {
alert("事件closed");
})
</script>