在 GitHub 上檢視

警示

使用少數可用且彈性的警示訊息，提供典型使用者動作的背景回饋訊息。

範例

警示可使用任何長度的文字，以及一個選用的關閉按鈕。為了適當的樣式，請使用八個 必要的 背景類別之一（例如，.alert-success）。對於內嵌關閉，請使用警示 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()

或使用按鈕上的 data 屬性在警示中，如上所示

<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...
})