Bootstra 警告框

用于根据用户操作的上下文为用户提供灵活的提示消息，.alert样式为此提供了基础的操作样式。

一、默认警告框

关闭按钮要确保设置button元素的属性值data-dismiss=“alert”，因为警告框的关闭功能是通过JavaScript检测该属性实现的，示例代码：

<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong>Best check you self , you are looking too good
</div>

效果：



二、可关闭警告框

在.alert样式上，在应用一个.alert-dismissable样式（用于增加容器右面的内边距，以便放置关闭符号），实例代码：

<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong>Best check you self , you are looking too good
</div>

效果：



三、多样式警告框

利用 .alert-warning .alert-danger .alert-success .alert-info 样式，示例代码：

 <div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong>Best check you self , you are looking too good
</div>
<div class="alert alert-danger alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong>Best check you self , you are looking too good
</div>
<div class="alert alert-info alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong>Best check you self , you are looking too good
</div>
<div class="alert alert-success alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Warning!</strong>Best check you self , you are looking too good
</div>

效果：



四、警告框中的链接

如果放置了链接，通常希望链接高亮显示，给a元素应用.alert-link样式即可，示例代码：

<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<a href="#"class="alert-link">Warning!Best check you self , you are looking too good</a>
</div>
<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert">×</button>
<a href="#">Warning!Best check you self , you are looking too good</a>
</div>

效果：第二个中的链接没有使用class=“alert-link”



六、可以将警告框的关闭按钮定义在警框的外面，但是，此时关闭按钮本身就没法关闭了，示例代码：

<a href="#" class="btn btn-default" data-dismiss="alert" data-target="#myalert">close it</a>
<div id="myalert" class="alert alert-warning fade in">
<h4>this is a titile</h4>
<p>this is the content of the alert ! </p>
</div>

警告框组件事件类型：