Bootstrap警告框
警告框
在交互式网页中，经常要根据用户操作的上下文为用户提供灵活的提示信息，比如操作成功、操作失败、错误提示等。
Bootstrap的警告框组件，用于为这些提示信息提供样式支持。警告框的关闭行为还需要 警告框插件 （alert.js）的支持。因此，如果要创建可以关闭的警告框，还必须引入 alert.js 文件。
创建警告框
将任意文本和一个可选的关闭按钮组合在一起，就能组成一个警告框。默认的警示框可以通过一个 .alert 类的 <div> 元素创建。但是，默认的灰色警告框并没有多大意义，你应该使用一种有意义的情景类。
Bootstrap为警告框提供了4 个情景类 .alert-success、.alert-info、.alert-warning、.alert-danger，分别表示成功、消息、警告、危险。这些情景类通过警告框的文本颜色和背景颜色，来给警告框赋予一定的含义。如：
<div class="alert alert-success" role="alert"><strong>Well done!</strong> You successfully read this alert message.</div><div class="alert alert-info" role="alert"><strong>Heads up!</strong> Needs your attention, but not super important.</div><div class="alert alert-warning" role="alert"><strong>Warning!</strong> Better check yourself, you're not looking too good.</div><div class="alert alert-danger" role="alert"><strong>Oh snap!</strong> Change a few things up and try submitting again.</div>
效果如图 3‑72所示：
图3-72 警告框
可关闭的警告框
为警告框添加一个可选的.alert-dismissible类和一个关闭按钮，就可以为警告框组件提供关闭功能。关闭按钮可以使用.close的任何元素定义，无论使用什么元素，都必须使用 .close 类，并包含 data-dismiss="alert" 属性，.close 类用于显示 '×' 符号，data-dismiss 属性用来执行关闭动作。如：
<div class="alert alert-warning alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert">×</button><strong>Warning!</strong> Better check yourself, you're not looking too good.</div>
效果如图 3‑73所示：
图3-73 可关闭的警告框
使用 <a> 定义关闭按钮时，移动版的Safari和Opera浏览器下，还需要包含 href="#" 属性。使用 <button> 时，还必须包含 type="button" 属性，否则将无法执行关闭动作。如：
<a href="#" class="close" data-dismiss="alert">×</a><button type="button" class="close" data-dismiss="alert">×</button>
另外，由于警告框组件的关闭功能需要依赖JavaScript 插件，为警告框组件提供关闭功能时，必须引入警告框插件 alert.js。
警告框中的链接
有时候，你可能想在警告框中加入链接，以便让用户可以跳转到某个地方或新的页面。如果警告框中包含链接，请为链接使用.alert-link工具类，它可以确保为链接设置与当前警告框相符的颜色。如：
<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对警告框中的链接文本的颜色进行相应的加深，并对字体进行加粗显示。效果如图 3‑74所示：
图3-74 警告框中的链接
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》、《Bootstrap3实用教程》，并全部在 GitHub 上开源。