大家在平時瀏覽網頁的時候，會發現一些警示框帶有關閉按鈕，用戶一點擊關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能。
使用方法：
只需要在默認的警示框里面添加一個關閉按鈕。然后進行三個步驟：
1、需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。
2、在button標簽中加入class="close"類，實現警示框關閉按鈕的樣式。
3、要確保關閉按鈕元素上設置了自定義屬性：“data-dismiss="alert"”（因為可關閉警示框需要借助于Javascript來檢測該屬性，從而控制警示框的關閉）。
具體使用如下：
<div class="alert alert-success alert-dismissable" role="alert"> <button class="close" type="button" data-dismiss="alert">×</button> 恭喜您操作成功！ </div>
運行效果如下：
原理分析：
在樣式上，需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式，這樣就可以實現帶關閉功能的警示框。
/*bootstrap.css文件第4447行～第4455行*/
.alert-dismissable {
padding-right: 35px;
}
.alert-dismissable .close {
position: relative;
top: -2px;
right: -21px;
color: inherit;
}
我來試試：在右側代碼任務部分補充代碼，為警告框添加“關閉按鈕”
效果圖如下：
參考代碼如下：
<div class="alert alert-info" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
請修改相應信息</div>
<div class="alert alert-success" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
謝謝，操作成功！</div>
<div class="alert alert-warning" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
您已操作失敗兩次，還有最后一次機會</div>
<div class="alert alert-danger" role="alert">
<button class="close" type="button" data-dismiss="alert">×</button>
對不起，您剛才的操作失敗</div>
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報