警告訊息（Alerts）

透過一系列可用且靈活的警告訊息，為典型的使用者操作提供情境回饋訊息。

本頁內容

範例（Examples）

警告訊息可用於任何長度的文字，以及可選的關閉按鈕。為了正確的樣式，請使用八個必要的情境類別之一（例如 .alert-success）。對於行內關閉功能，請使用警告訊息 JavaScript 外掛。

注意！ 從 v5.3.0 開始，alert-variant() Sass mixin 已被棄用。警告訊息變體現在透過 Sass 迴圈覆寫 CSS 變數。

A simple primary alert—check it out!

A simple secondary alert—check it out!

A simple success alert—check it out!

A simple danger alert—check it out!

A simple warning alert—check it out!

A simple info alert—check it out!

A simple light alert—check it out!

A simple dark alert—check it out!

html

<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>

無障礙提示： 僅使用顏色來傳達意義只提供了視覺指示，這不會傳達給使用輔助技術（如螢幕閱讀器）的使用者。請確保意義從內容本身就很明顯（例如，具有_足夠_色彩對比度的可見文字），或透過替代方式包含，例如使用 .visually-hidden 類別隱藏的額外文字。

互動範例（Live Example）

點擊下方按鈕顯示警告訊息（一開始透過行內樣式隱藏），然後使用內建的關閉按鈕關閉（並銷毀）它。

html

<div id="liveAlertPlaceholder"></div>
<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>

我們使用以下 JavaScript 來觸發即時警告訊息示範：

site/src/assets/partials/snippets.js

const alertPlaceholder = document.getElementById('liveAlertPlaceholder')
const appendAlert = (message, type) => {
  const wrapper = document.createElement('div')
  wrapper.innerHTML = [
    `<div class="alert alert-${type} alert-dismissible" role="alert">`,
    `   <div>${message}</div>`,
    '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
    '</div>'
  ].join('')

  alertPlaceholder.append(wrapper)
}

const alertTrigger = document.getElementById('liveAlertBtn')
if (alertTrigger) {
  alertTrigger.addEventListener('click', () => {
    appendAlert('Nice, you triggered this alert message!', 'success')
  })
}

連結顏色（Link color）

使用 .alert-link 通用類別在任何警告訊息中快速提供相配的顏色連結。

A simple primary alert with an example link. Give it a click if you like.

A simple secondary alert with an example link. Give it a click if you like.

A simple success alert with an example link. Give it a click if you like.

A simple danger alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

A simple dark alert with an example link. Give it a click if you like.

html

<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>

額外內容（Additional content）

警告訊息還可以包含額外的 HTML 元素，如標題、段落和分隔線。

Well done!

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.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

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>

圖示（Icons）

同樣地，您可以使用 flexbox 通用類別和 Bootstrap Icons 來建立帶有圖示的警告訊息。根據您的圖示和內容，您可能需要加入更多通用類別或自訂樣式。

An example alert with an icon

html

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg xmlns="http://www.w3.org/2000/svg" class="bi flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </svg>
  <div>
    An example alert with an icon
  </div>
</div>

需要為您的警告訊息使用多個圖示嗎？考慮使用更多 Bootstrap Icons 並建立本地 SVG sprite，這樣可以輕鬆地重複引用相同的圖示。

An example alert with an icon

An example success alert with an icon

An example warning alert with an icon

An example danger alert with an icon

html

<svg xmlns="http://www.w3.org/2000/svg" class="d-none">
  <symbol id="check-circle-fill" viewBox="0 0 16 16">
    <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
  </symbol>
  <symbol id="info-fill" viewBox="0 0 16 16">
    <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
  </symbol>
  <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16">
    <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
  </symbol>
</svg>

<div class="alert alert-primary d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Info:"><use xlink:href="#info-fill"/></svg>
  <div>
    An example alert with an icon
  </div>
</div>
<div class="alert alert-success d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg>
  <div>
    An example success alert with an icon
  </div>
</div>
<div class="alert alert-warning d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Warning:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example warning alert with an icon
  </div>
</div>
<div class="alert alert-danger d-flex align-items-center" role="alert">
  <svg class="bi flex-shrink-0 me-2" role="img" aria-label="Danger:"><use xlink:href="#exclamation-triangle-fill"/></svg>
  <div>
    An example danger alert with an icon
  </div>
</div>

關閉功能（Dismissing）

使用警告訊息 JavaScript 外掛，可以行內關閉任何警告訊息。方法如下：

確保您已載入警告訊息外掛，或編譯後的 Bootstrap JavaScript。
加入關閉按鈕和 .alert-dismissible 類別，這會在警告訊息右側加入額外的內距並定位關閉按鈕。
在關閉按鈕上，加入 data-bs-dismiss="alert" 屬性，這會觸發 JavaScript 功能。請確保使用 <button> 元素以確保在所有裝置上的正確行為。
要在關閉時為警告訊息加入動畫效果，請確保加入 .fade 和 .show 類別。

您可以透過即時示範看到效果：

Holy guacamole! You should check in on some of those fields below.

html

<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="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

當警告訊息被關閉時，該元素會從頁面結構中完全移除。如果鍵盤使用者使用關閉按鈕關閉警告訊息，他們的焦點會突然丟失，並根據瀏覽器重置到頁面/文件的開頭。因此，我們建議加入額外的 JavaScript 來監聽 closed.bs.alert 事件，並以程式方式將 focus() 設定到頁面中最適當的位置。如果您計劃將焦點移動到通常不會接收焦點的非互動元素，請確保在該元素上加入 tabindex="-1"。

CSS

變數（Variables）

Added in v5.2.0

作為 Bootstrap 持續演進的 CSS 變數方法的一部分，警告訊息現在在 .alert 上使用本地 CSS 變數來增強即時自訂功能。CSS 變數的值透過 Sass 設定，因此 Sass 自訂仍然受支援。

scss/_alert.scss

--#{$prefix}alert-bg: transparent;
--#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-color: inherit;
--#{$prefix}alert-border-color: transparent;
--#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: #{$alert-border-radius};
--#{$prefix}alert-link-color: inherit;

Sass 變數（Sass variables）

scss/_variables.scss

$alert-padding-y:               $spacer;
$alert-padding-x:               $spacer;
$alert-margin-bottom:           1rem;
$alert-border-radius:           var(--#{$prefix}border-radius);
$alert-link-font-weight:        $font-weight-bold;
$alert-border-width:            var(--#{$prefix}border-width);
$alert-dismissible-padding-r:   $alert-padding-x * 3; // 3x covers width of x plus default padding on either side

Sass mixins

Deprecated in v5.3.0

scss/mixins/_alert.scss

@mixin alert-variant($background, $border, $color) {
  --#{$prefix}alert-color: #{$color};
  --#{$prefix}alert-bg: #{$background};
  --#{$prefix}alert-border-color: #{$border};
  --#{$prefix}alert-link-color: #{shade-color($color, 20%)};

  @if $enable-gradients {
    background-image: var(--#{$prefix}gradient);
  }

  .alert-link {
    color: var(--#{$prefix}alert-link-color);
  }
}

Sass 迴圈（Sass loops）

透過覆寫 CSS 變數來產生修飾類別的迴圈。

scss/_alert.scss

// Generate contextual modifier classes for colorizing the alert
@each $state in map-keys($theme-colors) {
  .alert-#{$state} {
    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
  }
}

JavaScript 行為（JavaScript behavior）

初始化（Initialize）

將元素初始化為警告訊息

const alertList = document.querySelectorAll('.alert')
const alerts = [...alertList].map(element => new bootstrap.Alert(element))

僅為了關閉警告訊息的目的，不需要透過 JS API 手動初始化元件。透過使用 data-bs-dismiss="alert"，元件將自動初始化並正確關閉。

更多詳情請參閱觸發器章節。

觸發器（Triggers）

可以透過 alert 內部按鈕上的 data-bs-dismiss 屬性來實現關閉功能，如下所示：

<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>

或者透過 alert 外部的按鈕，使用額外的 data-bs-target，如下所示：

<button type="button" class="btn-close" data-bs-dismiss="alert" data-bs-target="#my-alert" aria-label="Close"></button>

請注意，關閉警告訊息會將其從 DOM 中移除。

方法（Methods）

您可以使用警告訊息建構函式建立警告訊息實例，例如：

const bsAlert = new bootstrap.Alert('#myAlert')

這使警告訊息能夠監聽具有 data-bs-dismiss="alert" 屬性的子元素上的點擊事件。（使用 data-api 的自動初始化時不需要。）

方法	說明
`close`	透過從 DOM 中移除來關閉警告訊息。如果元素上存在 `.fade` 和 `.show` 類別，警告訊息會在移除前淡出。
`dispose`	銷毀元素的警告訊息。（移除儲存在 DOM 元素上的資料）
`getInstance`	靜態方法，允許您取得與 DOM 元素關聯的警告訊息實例。例如：`bootstrap.Alert.getInstance(alert)`。
`getOrCreateInstance`	靜態方法，返回與 DOM 元素關聯的警告訊息實例，如果尚未初始化則建立一個新的。您可以這樣使用：`bootstrap.Alert.getOrCreateInstance(element)`。

基本用法：

const alert = bootstrap.Alert.getOrCreateInstance('#myAlert')
alert.close()

事件（Events）

Bootstrap 的警告訊息外掛公開了一些事件，用於掛鉤警告訊息功能。

事件	說明
`close.bs.alert`	當呼叫 `close` 實例方法時立即觸發。
`closed.bs.alert`	當警告訊息已關閉且 CSS 轉場完成時觸發。

const myAlert = document.getElementById('myAlert')
myAlert.addEventListener('closed.bs.alert', event => {
  // do something, for instance, explicitly move focus to the most appropriate element,
  // so it doesn't get lost/reset to the start of the page
  // document.getElementById('...').focus()
})