Bootstrap源码解读标签、徽章、缩略图和警示框（(2)

可以追加类名来实现不同的警示框效果：
1. .alert-success 成功警示框，背景、边框和文本都是绿色
2. .alert-info 信息警示框，背景、边框和文本都是浅蓝色
3. .alert-warning 警告警示框，背景、边框、文本都是浅黄色
4. .alert-danger 错误警示框，背景、边框和文本都是浅红色
例如：<div role="alert">对不起，您输入的密码有误</div>
实现源码如下：

.alert-success { color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert-success hr { border-top-color: #c9e2b3; } .alert-success .alert-link { color: #2b542c; } .alert-info { color: #31708f; background-color: #d9edf7; border-color: #bce8f1; } .alert-info hr { border-top-color: #a6e1ec; } .alert-info .alert-link { color: #245269; } .alert-warning { color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } .alert-warning hr { border-top-color: #f7e1b5; } .alert-warning .alert-link { color: #66512c; } .alert-danger { color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .alert-danger hr { border-top-color: #e4b9c0; } .alert-danger .alert-link { color: #843534; }

可关闭的警示框

使用方法如下：
1. 在基本警示框“alert”的基础上添加“alert-dismissable”样式。
2. 在警示框内加入一个按钮。
3. 在这个button标签中加入class=”close”类，实现警示框关闭按钮的样式。
4. 关闭按钮元素上设置自定义属性：“data-dismiss=”alert”。因为可关闭警示框需要借助于Javascript来检测该属性，从而控制警示框的关闭。
例如：

<div role="alert"> <button type="button" data-dismiss="alert">&times;</button> 对不起，您输入的密码有误 </div>

实现源码如下：

.alert-dismissable, .alert-dismissible { padding-right: 35px; } .alert-dismissable .close, .alert-dismissible .close { position: relative; top: -2px; right: -21px; color: inherit; }

警示框的链接

给警示框加的链接添加“alert-link”的类名，通过“alert-link”样式给链接提供高亮显示。
例如：

<div role="alert"> <strong>申请成功！</strong> 下一步请 <a href="#">验证邮箱</a> 。 </div>

实现源码如下：

.alert .alert-link { font-weight: bold; } .alert-success .alert-link { color: #2b542c; } .alert-info .alert-link { color: #245269; } .alert-warning .alert-link { color: #66512c; } .alert-danger .alert-link { color: #843534; }