4.15.2　可关闭的警告框

在.alert样式上，再应用一个.alert-dismissable样式即可实现一个可关闭的警告框。使用方式如下：

<div class="alert alert-warning alert-dismissable">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</
    button>
  <strong>Warning!</strong>
    <p>Best check yo self, you're not looking too good.</p>
</div>

运行效果如图4-72所示。

图4-72　可关闭的警告框

可关闭的警告框的实现方式主要是增加了.alert-dismissable容器右边的内边距，以便放置关闭符号。源码如下：

// 源码4454行
.alert-dismissable {            /* 警告框内，如果是可关闭的话 */
  padding-right: 35px;          /* 增大右内边距，以便放置关闭按钮*/
}
.alert-dismissable .close {     /* 警告框内，如果放置关闭按钮，特殊处理 */
  position: relative;
  top: -2px;
  right: -21px;                 /* 关闭按钮，再向右，以便右对齐 */
  color: inherit;
}