警告框組件通過提供一些靈活的預(yù)定義消息,為常見的用戶動作提供反饋消息。
將任意文本和一個(gè)可選的關(guān)閉按鈕組合在一起就能組成一個(gè)警告框,.alert 類是必須要設(shè)置的,另外我們還提供了有特殊意義的 4 個(gè)類(例如,.alert-success),代表不同的警告信息。
警告框沒有默認(rèn)類,只有基類和修飾類。默認(rèn)的灰色警告框并沒有多少意義。所以您要使用一種有意義的警告類。目前提供了成功、消息、警告或危險(xiǎn)。
<div class="alert alert-success" role="alert">...</div>
<div class="alert alert-info" role="alert">...</div>
<div class="alert alert-warning" role="alert">...</div>
<div class="alert alert-danger" role="alert">...</div>
為警告框添加一個(gè)可選的 .alert-dismissible 類和一個(gè)關(guān)閉按鈕。
如果需要為警告框組件提供關(guān)閉功能,請使用 jQuery 警告框插件。
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
務(wù)必給 <button> 元素添加 data-dismiss="alert" 屬性。
用 .alert-link 工具類,可以為鏈接設(shè)置與當(dāng)前警告框相符的顏色。
<div class="alert alert-success" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-info" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-warning" role="alert">
<a href="#" class="alert-link">...</a>
</div>
<div class="alert alert-danger" role="alert">
<a href="#" class="alert-link">...</a>
</div>