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