4.7Bootstrap学习js插件篇之警告框

案例

通过这个插件可以为所有警告框增加关闭功能。

代码段：

<div class="bs-example">
		<h1 class="page-header">4、警示框</h1>
      <div class="alert alert-warning fade in">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.
      </div>
		
	</div>

预览：

官网小例子

   <div class="alert alert-danger fade in">
        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
        <h4>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>
          <button type="button" class="btn btn-danger">Take this action</button>
          <button type="button" class="btn btn-success">Or do this</button>
        </p>
      </div>
复制代码

预览：

为关闭按钮设置data-dismiss="alert"   为警告框赋予关闭功能

用法

通过JavaScript启用警告框关闭功能：

$(".alert").alert()

标记

只需为关闭按钮设置data-dismiss="alert"即可自动为警告框赋予关闭功能。

<a class="close" data-dismiss="alert" href="#" aria-hidden="true">&times;</a>

方法

$().alert()

为所有警告框加入关闭功能。如果希望警告框被关闭时呈现动画效果，请确保为其添加了.fade 和 .in。

.alert('close')

关闭警告框。

$(".alert").alert('close')

事件

Bootstrap中的警告框暴露了一组事件，允许你进行监听。

事件类型	描述
close.bs.alert	当close函数被调用之后，此事件被立即触发。
closed.bs.alert	当警告框被关闭之后（同时CSS过渡效果执行完毕），此事件被触发。

$('#my-alert').bind('closed.bs.alert', function () {
  // do something…
})

没啥好说的。。跟其他差不多