5.8.1　声明式用法

警告框的一般使用方法需要注意一点，那就是要在关闭x号元素上设置自定义属性data-dismiss="alert"。示例源码如下：

<div class="alert alert-warning fade in">
<button data-dismiss="alert" class="close" type="button">×</button>
    <h4>警告标题</h4>
    <p>Change this and that and try again. ...</p>
</div>

默认情况下，如果不设置data-target属性，则会关闭x号按钮元素所在的父元素容器，即外部的div元素。关闭按钮不一定非要用x号，也可以是普通的按钮元素或者链接元素，只需要保证设置了data-dismiss="alert"即可。示例代码如下：

<div class="alert alert-warning fade in">
    <h4>警告标题</h4>
    <p>Change this and that and try again. ...</p>
<a href="#" class="btn btn-danger" data-dismiss="alert">关闭</a>
</div>

上述示例的运行效果如图5-14所示。

图5-14　不用x号的警告框效果

通过上面的代码，单击“关闭”按钮（其实是a链接）以后，也能关闭该警告框，因为该a链接元素同样也符合标准，即设置了data-dismiss="alert"。

通过前面的插件可以得知，一般插件在操作一个元素时都是按照先查找data-target属性，再查找href属性，如果都没有，则操作父元素的规则。我们可以发现，即便把“关闭”按钮定义在警告框外部，同时定义好data-target属性，也能关闭该警告框，示例代码如下：

<a href="#" class="btn btn-danger" data-dismiss="alert" data-target="#alert2">关闭</a>
<div id="alert2" class="alert alert-warning fade in">
<h4>警告标题</h4>
<p>Change this and that and try again. ...</p>
</div>

上述示例的运行效果如图5-15所示。

图5-15　触发外部元素关闭警告框

上面的代码和其他示例代码不同的地方是，a元素不仅设置了data-dismiss="alert"，还设置了data-target="#alert2"，而alert2则必须是要关闭警告的id值，也就是div设置的id必须是alert2。这种用法的效果有个弊端：按钮本身关闭不了，因为它已经不在警告框内了。