Bootstrap alert组件使用

1. 遇到的主要问题就是无法关闭弹出来的Alert提示：

<link rel="stylesheet" href="css/bootstrap.css" type="text/css"></link>

<!--一定要引入JQuery ，两者具有依赖关系 注意：必须放到bootstrap.js之前-->
<script src="js/jquery-1.9.1.min.js" > </script>

<script src="js/bootstrap.min.js" type="text/javascript"></script>

2.测试自动关闭的功能（设置2 S后自动关闭Alert提示Div）

<script>
$(".alert-success").alert();
window.setTimeout(function() { $(".alert-success").alert('close'); }, 2000);
</script>

<div class="alert alert-success fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
</div>

3. 事件的调用（可以在关闭和关闭后进行事件的调用）

<div class="alert alert-block alert-error fade in">
<button type="button" class="close" data-dismiss="alert">×</button>
<h4 class="alert-heading">Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<a class="btn btn-danger" href="#">Take this action</a> <a class="btn" id="close" data-dismiss="alert" href=".alert-block">Or do this</a>
</p>
</div>

<script>
$(function(){
//注意：事件要绑定在UI容器上，而不是关闭按钮中
$(".alert-block").on("close",function(){
alert("这是关闭前调用的")
})
$(".alert-block").on("closed",function(){
alert("这是关闭后调用的")
})
})

</script>