?
This document uses PHP Chinese website manual Release
使用少量可用且靈活的警報消息為典型的用戶操作提供環(huán)境反饋消息。
示例
警報可用于任何長度的文本，以及可選的解除按鈕。為了正確的樣式，使用八個必需的上下文類之一（例如，.alert-success）。對于內(nèi)聯(lián)解雇，使用警報 jQuery 插件。
<div class="alert alert-primary" role="alert"> This is a primary alert—check it out!</div><div class="alert alert-secondary" role="alert"> This is a secondary alert—check it out!</div><div class="alert alert-success" role="alert"> This is a success alert—check it out!</div><div class="alert alert-danger" role="alert"> This is a danger alert—check it out!</div><div class="alert alert-warning" role="alert"> This is a warning alert—check it out!</div><div class="alert alert-info" role="alert"> This is a info alert—check it out!</div><div class="alert alert-light" role="alert"> This is a light alert—check it out!</div><div class="alert alert-dark" role="alert"> This is a dark alert—check it out!</div>
將意義傳遞給輔助技術(shù)
使用顏色來增加意義只能提供一種視覺指示，而不會傳達(dá)給輔助技術(shù)的用戶 - 如屏幕閱讀器。確保由顏色表示的信息或者來自內(nèi)容本身（例如可見文本），或者通過其他方式包含，例如隱藏在.sr-only類中的其他文本。
鏈接顏色
使用.alert-link工具類可以快速提供任何警報中匹配的彩色鏈接。
<div class="alert alert-primary" role="alert"> This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div><div class="alert alert-secondary" role="alert"> This is a secondary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div><div class="alert alert-success" role="alert"> This is a success alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div><div class="alert alert-danger" role="alert"> This is a danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div><div class="alert alert-warning" role="alert"> This is a warning alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div><div class="alert alert-info" role="alert"> This is a info alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div><div class="alert alert-light" role="alert"> This is a light alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div><div class="alert alert-dark" role="alert"> This is a dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.</div>
其他內(nèi)容
警報還可以包含其他 HTML 元素，如標(biāo)題，段落和分隔符。
<div class="alert alert-success" role="alert"> <h4 class="alert-heading">Well done!</h4> <p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> <hr> <p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p></div>
駁回
使用警報 JavaScript 插件，可以解除任何內(nèi)聯(lián)警報。就是這樣：
確保你已經(jīng)加載了警報插件，或編譯好的 Bootstrap JavaScript。
如果您從源代碼構(gòu)建我們的 JavaScript，則需要
util.js。編譯版本包括這個。
添加一個解雇按鈕和
.alert-dismissible類別，在警報的右側(cè)添加額外的填充并定位.close按鈕。
在 dismiss 按鈕上，添加觸發(fā) JavaScript 功能的
data-dismiss="alert"屬性。請務(wù)必使用該<button>元素，以便在所有設(shè)備上正常運行。
要解除它們的動畫時，請務(wù)必添加
.fade和.show類。
你可以在現(xiàn)場演示中看到這一點：
<div class="alert alert-warning alert-dismissible fade show" role="alert"> <strong>Holy guacamole!</strong> You should check in on some of those fields below. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button></div>
JavaScript 行為
觸發(fā)器
通過 JavaScript 啟用解除警報：
$(".alert").alert()或者通過警報中的按鈕上的data屬性，如上所示：
<button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span></button>
請注意，關(guān)閉警報會將其從 DOM 中刪除。
方法
方法 | 描述 |
|---|---|
$().alert() | 使警報偵聽具有 data-dismiss =“alert”屬性的后代元素上的點擊事件。（使用 data-api 的自動初始化時不需要）。 |
$().alert('close') | 通過從 DOM 中刪除警報來關(guān)閉警報。如果元素上存在.fade 和.show 類，則警告將在刪除之前淡出。 |
$().alert('dispose') | 銷毀元素的警報。 |
$(".alert").alert('close')活動
引導(dǎo)程序的警報插件公開了一些事件，以便掛接到警報功能。
事件 | 描述 |
|---|---|
close.bs.alert | 該事件在調(diào)用 close 實例方法時立即觸發(fā)。 |
closed.bs.alert | 警報關(guān)閉時將觸發(fā)此事件（將等待 CSS 轉(zhuǎn)換完成）。 |
$('#myAlert').on('closed.bs.alert', function () { // do something…})