.alert { padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; } .alert h4 { margin-top: 0; color: inherit; } .alert .alert-link { font-weight: bold; } .alert > p, .alert > ul { margin-bottom: 0; } .alert > p + p { margin-top: 5px; } .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; }
例如：
<div role="alert">恭喜你操作成功！</div> <div role="alert">请输入正确的密码</div> <div role="alert">你已经操作失败两次，还有最后一次机会</div> <div role="alert">对不起，你的密码输入有误！</div>
可关闭的警示框
1、在默认的警示框的容器上追加一个.alert-dismissable类名
2、在button标签中添加.close，实现警告框的关闭按钮
3、确保关闭按钮元素上设置了自定义属性data-dismiss=”alert“（关闭警示框需要通过js来检测该属性，从而控制警示框的关闭）
例子：
<div role="alert"> <button type="button" data-dismiss="alert">×</button> 恭喜你操作成功！ </div> <divrole="alert"> <button type="button" data-dismiss="alert">×</button> 请输入正确的密码 </div> <div role="alert"> <button type="button" data-dismiss="alert">×</button> 你已经操作失败两次，还有最后一次机会 </div> <div role="alert"> <button type="button" data-dismiss="alert">×</button> 对不起，你的密码输入有误！ </div>
警示框的链接
有时候需要在警示框中加入链接，告诉用户跳转到新的页面，bootstrap框架中对警示框的链接做了高亮处理。给警告框加的链接添加一个为.alert-link的类名，下面是alert-link的css样式
.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; }
例子：
<div role="alert"> <strong>Well done!</strong> You successfully read <a href="#">this important alert message</a> </div> <div role="alert"> <strong>Well done!</strong> You successfully read <a href="#">this important alert message</a> </div> <div role="alert"> <strong>Well done!</strong> You successfully read <a href="#">this important alert message</a> </div> <div role="alert"> <strong>Well done!</strong> You successfully read <a href="#">this important alert message</a> </div>
