Bootstrap - 警报插件

Bootstrap Alert Plugin - 从概述，环境设置，基本结构，全局样式，网格系统，流体网格系统，布局，响应式设计，排版，表格，按钮，图像，图标，下拉，按钮开始，简单易学地学习Bootstrap组，导航元素，导航栏，面包屑，分页，标签，徽章，版式，缩略图，警报，进度栏，媒体对象，Javascript插件像过渡，模态，下拉列表，Scrollspy，选项卡，工具提示，弹出，警报，按钮，折叠， Carousel，Typeahead，Affix，Glyphicons，Jumbotron，Demos。

警报消息主要用于向最终用户显示警告或确认消息等信息.使用警报消息插件，您可以为所有警报消息添加消除功能.

如果您想单独包含此插件功能，则需要 alert.js .另外，如 Bootstrap插件概述一章所述，您可以包含 bootstrap.js 或缩小版本. bootstrap.min.js .

用法

您可以通过以下两种方式启用解除警报;

通过数据属性 : 要通过Data API解除，只需将 data-dismiss ="alert"添加到关闭按钮，即可自动发出警报关闭功能.

×

通过JavaScript : 要通过JavaScript解雇，请使用以下语法 :

$(".alert") .alert()

示例

以下示例演示了如何通过数据属性使用警报插件.

         ×         Warning! There was a problem with your network connection.

Options

这里没有选择。

Methods

以下是一些有用的警报插件方法:

Method	Description	Example
.alert()	This method wraps all alerts with close functionality.	$('#identifier').alert();
Close Method .alert('close')	To enable all alerts to be closed, add this method.	$('#identifier').alert('close');

要在关闭时启用警报以进行动画处理，请确保它们已经应用了.fade和.in类。

Example

以下示例演示了.alert（）方法的用法:

Alert messages to demonstrate alert() method 
   ×   Success! the result is successful.

× Warning! There was a problem with your network connection. $(function(){ $(".close").click(function(){ $("#myAlert").alert(); }); });

以下示例演示了.alert（'close'）方法的用法:

Alert messages to demonstrate alert('close') method 
   ×   Success! the result is successful.   ×   Warning! There was a problem with your network connection.   $(function(){      $(".close").click(function(){         $("#myAlert").alert('close');      });   });

使用Try it编辑器尝试此代码。您可以看到关闭功能应用于所有警报消息，即关闭任何警报消息，其余警报消息也将关闭。

Events

下表列出要使用警报插件的事件.此事件可用于挂钩警报功能.

事件	描述	示例
close.bs. alert	当调用 close 实例方法时，该事件立即触发.	$('＃myalert').bind('close.bs.alert'，function(){//做点什么})
closed.bs.alert	当警报关闭时将触发此事件(将等待CSS转换完成).	$('＃myalert').bind('closed.bs.alert'，function(){//做点什么})

示例

以下示例演示了警报插件事件 :

   ×   Success! the result is successful.   $(function(){      $("#myAlert").bind('closed.bs.alert', function () {         alert("Alert message box is closed.");      });   });