如果通過自定義的HTML屬性（聲明式）來觸發(fā)警告框，需要在關(guān)閉按鈕上設(shè)置自定義屬性data-dismiss="alert"，如下所示：

<div class="alert alert-success" role="alert">
    <button class="close"  data-dismiss="alert" type="button" >&times;</button>
    <p>恭喜您操作成功！</p>
</div>

運行效果如下：

點擊X會關(guān)閉整個警告框。

其實關(guān)閉按鈕，不一定非要用X號，也可以是普通的按鈕元素或者鏈接元素，只需要保證關(guān)閉元素帶有自定義屬性data-dismiss="alert"即可，如下面示例所示：

<div class="alert alert-warning" role="alert">
    <h4>謹(jǐn)防被騙</h4>
    <p>請確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識的人...</p>
    <a href="#" class="btn btn-danger" data-dismiss="alert">關(guān)閉</a>
</div>

運行效果如下：

當(dāng)用戶點擊“關(guān)閉”按鈕就可以關(guān)閉整個警告框。

前面兩個示例，操作關(guān)閉按鈕時都是先查找 data-target 屬性，再查找 href 屬性，如果關(guān)閉按鈕都沒有定義這兩個屬性，就會操作其父元素。也就是說，關(guān)閉按鈕不在 div.alert 容器內(nèi)時，只要給關(guān)閉元素定義了data-target屬性（如果是鏈接元素還可以通過href屬性）,而且屬性值與div.alert容器的id一致，關(guān)閉元素放在容器外也可以關(guān)閉警告框。來看一個簡單的示例：

<div class="alert alert-warning" role="alert" id="myAlert">
    <h4>謹(jǐn)防被騙</h4>
    <p>請確認(rèn)您轉(zhuǎn)賬的信息是你的親朋好友，不要輕意相信不認(rèn)識的人...</p>
</div>
<button type="button" data-target="#myAlert" class="btn btn-danger" data-dismiss="alert">關(guān)閉</button>

這種方式點擊“關(guān)閉”按鈕也可以關(guān)閉警告框，只不過“關(guān)閉”按鈕自身沒辦法關(guān)閉，會一直顯示在那，如下圖所示：