Source

警報

使用少量可用且靈活的警報消息為典型用戶操作提供上下文反饋消息。

例子

警報可用於任何長度的文本，以及可選的關閉按鈕。要獲得正確的樣式，請使用八個必需的上下文類之一（例如，.alert-success）。對於內聯解除，使用alerts jQuery 插件。

一個簡單的主要警報——檢查一下！

一個簡單的輔助警報——檢查一下！

一個簡單的成功警報——檢查一下！

一個簡單的危險警報——檢查一下！

一個簡單的警告警報——檢查一下！

一個簡單的信息提醒——看看吧！

一個簡單的燈光警報——檢查一下！

一個簡單的黑暗警報——檢查一下！

<div class="alert alert-primary" role="alert">
  A simple primary alert—check it out!
</div>
<div class="alert alert-secondary" role="alert">
  A simple secondary alert—check it out!
</div>
<div class="alert alert-success" role="alert">
  A simple success alert—check it out!
</div>
<div class="alert alert-danger" role="alert">
  A simple danger alert—check it out!
</div>
<div class="alert alert-warning" role="alert">
  A simple warning alert—check it out!
</div>
<div class="alert alert-info" role="alert">
  A simple info alert—check it out!
</div>
<div class="alert alert-light" role="alert">
  A simple light alert—check it out!
</div>
<div class="alert alert-dark" role="alert">
  A simple dark alert—check it out!
</div>

向輔助技術傳達意義

使用顏色來添加含義僅提供視覺指示，不會傳達給輔助技術的用戶 - 例如屏幕閱讀器。確保由顏色表示的信息在內容本身（例如可見文本）中是顯而易見的，或者通過替代方式包含在內，例如隱藏在.sr-only類中的附加文本。

鏈接顏色

使用.alert-link實用程序類在任何警報中快速提供匹配的彩色鏈接。

帶有示例鏈接的簡單主要警報。如果您願意，請單擊它。

帶有示例鏈接的簡單輔助警報。如果您願意，請單擊它。

帶有示例鏈接的簡單成功警報。如果您願意，請單擊它。

帶有示例鏈接的簡單危險警報。如果您願意，請單擊它。

帶有示例鏈接的簡單警告警報。如果您願意，請單擊它。

帶有示例鏈接的簡單信息警報。如果您願意，請單擊它。

帶有示例鏈接的簡單燈光警報。如果您願意，請單擊它。

帶有示例鏈接的簡單黑暗警報。如果您願意，請單擊它。

<div class="alert alert-primary" role="alert">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple 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">
  A simple dark alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

附加內容

警報還可以包含額外的 HTML 元素，如標題、段落和分隔符。

做得好！

哇，是的，您成功閱讀了這條重要的警報消息。此示例文本將運行更長的時間，以便您可以看到警報中的間距如何與此類內容一起使用。

每當您需要時，請務必使用邊距實用程序來保持整潔。

<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 插件，可以消除內聯的任何警報。就是這樣：

確保您已加載警報插件或已編譯的 Bootstrap JavaScript。
如果您從源代碼構建我們的 JavaScript，它需要util.js. 編譯的版本包括這個。
添加關閉按鈕和.alert-dismissible類，這會在警報右側添加額外的填充並定位.close按鈕。
在關閉按鈕上，添加data-dismiss="alert"觸發 JavaScript 功能的屬性。確保將<button>元素與它一起使用，以便在所有設備上保持正確的行為。
要在解除警報時為警報設置動畫，請務必添加.fade和.show類。

您可以通過現場演示看到這一點：

神聖的鱷梨醬！您應該檢查下面的一些字段。

<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">&times;</span>
  </button>
</div>

JavaScript 行為

觸發器

啟用通過 JavaScript 解除警報：

$('.alert').alert()

或者在 alertdata中的按鈕上使用屬性，如上所示：

<button type="button" class="close" data-dismiss="alert" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>

請注意，關閉警報會將其從 DOM 中刪除。

方法

方法	描述
`$().alert()`	使警報偵聽具有該`data-dismiss="alert"`屬性的後代元素上的單擊事件。（使用 data-api 的自動初始化時不需要。）
`$().alert('close')`	通過從 DOM 中刪除警報來關閉它。如果元素上存在`.fade`和`.show`類，則警報將在被刪除之前淡出。
`$().alert('dispose')`	破壞元素的警報。

$('.alert').alert('close')

活動

Bootstrap 的警報插件公開了一些用於連接警報功能的事件。

事件	描述
`close.bs.alert`	`close`調用實例方法時立即觸發此事件。
`closed.bs.alert`	當警報關閉時觸發此事件（將等待 CSS 轉換完成）。

$('#myAlert').on('closed.bs.alert', function () {
  // do something...
})