4.15.1　默认警告框

默认的警告框是用带有alert样式的div元素容器包含的（p元素也可以），内部可选地添加一个关闭按钮button元素，只不过关闭按钮要确保设置button元素的属性值data-dismiss="alert"，原因是警告框的关闭功能是通过JavaScript检测该属性实现的（具体原理在5.8节会讲到）。示例如下：

  1. <div class="alert">
  2.   <button type="button" class="close" data-dismiss="alert">×</button>
  3.   <strong>Warning!</strong> Best check yo self, you're not looking too good.
  4. </div>

上述示例的运行效果如图4-70所示。

4.15.1　默认警告框 - 图1 图4-70　默认警告框运行效果

alert样式的源码主要是设置了背景色、边框、角度和文字颜色，然后特殊处理了两种内部元素h4和hr，分别用于显示警告框中的标题和分隔符。源码如下：

  1. // 源码4434行
  2. .alert {                                                /* 基本的警告框设置 */
  3.   padding: 15px;
  4.   margin-bottom: 20px;
  5.   border: 1px solid transparent;
  6.   border-radius: 4px;
  7. }
  8. .alert h4 {  margin-top: 0;  color: inherit;}
  9. .alert .alert-link {  font-weight: bold;        /* alert内的链接样式 */}
  10. .alert > p,
  11. .alert > ul {
  12.   margin-bottom: 0; /* alert内的p元素和ul元素的底部外边距设置 */
  13. }
  14. .alert > p + p {  margin-top: 5px;              /*两个段落之间，增加一个顶部外边距*/}

一个完整的警告框，在应用了h4和hr元素以后，看起来就有了一种酷炫的效果，如图4-71所示。

4.15.1　默认警告框 - 图2 图4-71　完整的警告框运行效果