Bootstrap之：警示框

Bootstrap框架通过“alert“样式来实现警示框效果。在默认情况之下，提供了四种不同的警示框效果：

1、成功警示框：告诉用用户操作成功，在“alert”样式基础上追加“alert-success”样式，具体呈现的是背景、边框和文本都是绿色；

2、信息警示框：给用户提供提示信息，在“alert”样式基础上追加“alert-info”样式，具体呈现的是背景、边框和文本都是浅蓝色；

3、警告警示框：提示用户小心操作（提供警告信息），在“alert”样式基础上追加“alert-warning”样式，具体呈现的是背景、边框、文本都是浅黄色；

4、错误警示框：提示用户操作错误，在“alert”样式基础上追加“alert-danger”样式，具体呈现的是背景、边框和文本都是浅红色。

<h2>默认警示框</h2>

<div class="alert alert-success" role="alert">恭喜您操作成功！</div>

<div class="alert alert-info" role="alert">请输入正确的密码</div>

<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>

<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>

<h2>可关闭的警示框</h2>

<div class="alert alert-success alert-dismissable" role="alert">

<button class="close" type="button" data-dismiss="alert">&times;</button>

恭喜您操作成功！

</div>

<div class="alert alert-info alert-dismissable" role="alert">

<button class="close" type="button" data-dismiss="alert">&times;</button>

请输入正确的密码

</div>

<div class="alert alert-warning alert-dismissable" role="alert">

<button class="close" type="button" data-dismiss="alert">&times;</button>

您已操作失败两次，还有最后一次机会

</div>

<div class="alert alert-danger alert-dismissable" role="alert">

<button class="close" type="button" data-dismiss="alert">&times;</button>

对不起，您输入的密码有误

</div>

<h2>警示框的链接</h2>

<div class="alert alert-success" role="alert">

<strong>Well done!</strong>

You successfully read

<a href="#" class="alert-link">this important alert message</a>

.

</div>

<div class="alert alert-info" role="alert">

<strong>Heads up!</strong>

This

<a href="#" class="alert-link">alert needs your attention</a>

, but it\'s not super important.

</div>

<div class="alert alert-warning" role="alert">

<strong>Warning!</strong>

Better check yourself, you\'re

<a href="#" class="alert-link">not looking too good</a>

.

</div>

<div class="alert alert-danger" role="alert">

<strong>Oh snap!</strong>

<a href="#" class="alert-link">Change a few things up</a>

and try submitting again.

</div>

警示框--可关闭的警示框

大家在平时浏览网页的时候，会发现一些警示框带有关闭按钮，用户一点击关闭按钮就能自动关闭显示的警示框（也就是让警示框隐藏不显示）。在Bootstrap框架中的警示框也具有这样的功能。

使用方法：

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤：

1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

2、在button标签中加入class="close"类，实现警示框关闭按钮的样式。

3、要确保关闭按钮元素上设置了自定义属性：“data-dismiss="alert"”（因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭）。

例如：

<div class="alert alert-success alert-dismissable" role="alert">

<button class="close" type="button" data-dismiss="alert">&times;</button>

恭喜您操作成功！

</div>