提示

使用提示訊息向您的訪客推播通知，這是一個輕量且容易自訂的警示訊息。

在此頁面上

提示訊息是輕量級的通知，旨在模擬行動和桌上型作業系統普及的推播通知。它們使用彈性方塊建立，因此很容易對齊和定位。

概述

使用提示訊息外掛程式時應注意的事項

提示訊息會為了效能而選擇加入，因此您必須自行初始化。
如果您未指定 autohide: false，提示訊息會自動隱藏。

此元件的動畫效果取決於 prefers-reduced-motion 媒體查詢。請參閱無障礙文件中的減少動作區段。

範例

基本

為了鼓勵可擴充且可預測的提示，我們建議使用標題和內文。提示標題使用 display: flex，讓內容能輕鬆對齊，這要歸功於我們的 margin 和 flexbox 實用程式。

提示能根據您的需求靈活調整，而且幾乎不需要標記。至少，我們需要一個單一元素來包含您的「提示」內容，並強烈建議使用一個關閉按鈕。

嗨，世界！這是一個提示訊息。

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

以前，我們的腳本會動態新增 .hide 類別，以完全隱藏提示（使用 display:none，而不是僅使用 opacity:0）。現在不再需要這樣做。但是，為了向後相容性，我們的腳本將繼續切換類別（即使實際上不需要），直到下一個主要版本。

實際範例

按一下下方按鈕，以顯示預設為隱藏的提示（使用我們的實用程式定位在右下角）。

嗨，世界！這是一個提示訊息。

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

我們使用以下 JavaScript 來觸發我們的實際提示示範

site/assets/js/snippets.js

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}

半透明

提示會稍微半透明，以與其下方內容融合。

嗨，世界！這是一個提示訊息。

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-body-secondary">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

堆疊

您可以將提示包裝在提示容器中來堆疊提示，這會垂直增加一些間距。

看到了嗎？就像這樣。

注意，提示框會自動堆疊

html

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

自訂內容

透過移除次組件、使用工具程式調整或新增自己的標記，自訂提示框。在此，我們移除預設的 .toast-header、從 Bootstrap Icons 新增自訂隱藏圖示，並使用一些 Flexbox 工具程式調整版面，建立一個更簡潔的提示框。

嗨，世界！這是一個提示訊息。

html

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

或者，你也可以在提示框中新增其他控制項和組件。

嗨，世界！這是一個提示訊息。

html

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

色彩配置

根據上述範例，你可以使用我們的色彩和背景工具程式，建立不同的提示框色彩配置。在此，我們在 .toast 中新增 .text-bg-primary，然後在關閉按鈕中新增 .btn-close-white。為了讓邊緣更俐落，我們使用 .border-0 移除預設的邊框。

嗨，世界！這是一個提示訊息。

html

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

放置

使用自訂 CSS 將提示框放置到你需要的位置。右上角通常用於通知，中間上方也是。如果你一次只會顯示一個提示框，請將定位樣式直接套用在 .toast 上。

嗨，世界！這是一個提示訊息。

html

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

對於會產生更多通知的系統，請考慮使用包裝元素，以便它們可以輕鬆堆疊。

看到了嗎？就像這樣。

注意，提示框會自動堆疊

html

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

您也可以使用 flexbox 工具程式來對齊吐司通知，使其水平和/或垂直對齊。

嗨，世界！這是一個提示訊息。

html

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

無障礙

吐司通知旨在對您的訪客或使用者造成小幅中斷，因此，為了協助使用螢幕閱讀器和類似輔助技術的人士，您應該將吐司通知包覆在 aria-live 區域中。螢幕閱讀器會自動宣布對動態區域的變更（例如注入/更新吐司通知元件），而無需移動使用者的焦點或以其他方式中斷使用者。此外，請包含 aria-atomic="true" 以確保始終將整個吐司通知宣告為單一（原子）單位，而不仅仅宣告已變更的內容（如果您只更新吐司通知內容的一部分，或稍後顯示相同的吐司通知內容，這可能會導致問題）。如果所需的資訊對於流程很重要，例如表單中的錯誤清單，請改用警告元件，而不是吐司通知。

請注意，動態區域需要在產生或更新吐司通知之前出現在標記中。如果您同時動態產生兩者並將它們注入頁面，輔助技術通常不會宣告它們。

您還需要根據內容調整 role 和 aria-live 層級。如果是錯誤等重要訊息，請使用 role="alert" aria-live="assertive"，否則請使用 role="status" aria-live="polite" 屬性。

當您顯示的內容變更時，請務必更新 delay 超時，以便使用者有足夠的時間閱讀吐司通知。

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

使用 autohide: false 時，您必須新增一個關閉按鈕，以允許使用者關閉吐司通知。

嗨，世界！這是一個提示訊息。

html

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

雖然技術上可以在您的提示訊息中加入可聚焦/可操作的控制項（例如額外的按鈕或連結），但您應該避免對自動隱藏的提示訊息執行此操作。即使您給予提示訊息一個很長的 延遲 超時，鍵盤和輔助技術使用者可能還是很難在時間內觸及提示訊息以採取行動（因為提示訊息在顯示時不會接收焦點）。如果您絕對需要進一步的控制項，我們建議使用 autohide: false 的提示訊息。

CSS

變數

已加入 v5.2.0

作為 Bootstrap 不斷發展的 CSS 變數方法的一部分，提示訊息現在在 .toast 上使用本機 CSS 變數，以增強即時自訂化。CSS 變數的值透過 Sass 設定，因此 Sass 自訂化仍然受到支援。

scss/_toasts.scss

--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass 變數

scss/_variables.scss

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

使用

透過 JavaScript 初始化提示訊息

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

觸發

關閉可以在提示訊息內部的按鈕上使用 data-bs-dismiss 屬性達成，如下所示

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

或在提示訊息外部的按鈕上使用額外的 data-bs-target，如下所示

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

選項

由於選項可以透過資料屬性或 JavaScript 傳遞，您可以將選項名稱附加到 data-bs-，例如 data-bs-animation="{value}"。在透過資料屬性傳遞選項時，請務必將選項名稱的類型從「camelCase」變更為「kebab-case」。例如，使用 data-bs-custom-class="beautifier"，而不是 data-bs-customClass="beautifier"。

從 Bootstrap 5.2.0 開始，所有元件都支援一個實驗性的保留資料屬性 data-bs-config，它可以將簡單的元件組態作為 JSON 字串儲存。當一個元素具有 data-bs-config='{"delay":0, "title":123}' 和 data-bs-title="456" 屬性時，最後的 title 值將會是 456，而個別的資料屬性將會覆寫 data-bs-config 上給定的值。此外，現有的資料屬性能夠儲存 JSON 值，例如 data-bs-delay='{"show":0,"hide":150}'。

最後的組態物件是 data-bs-config、data-bs- 和 js 物件 合併的結果，其中最新的給定鍵值會覆寫其他鍵值。

名稱	類型	預設值	說明
`animation`	布林值	`true`	對提示套用 CSS 淡入淡出轉場。
`autohide`	布林值	`true`	在延遲後自動隱藏提示。
`delay`	數字	`5000`	在隱藏提示之前以毫秒為單位的延遲時間。

方法

所有 API 方法都是非同步的，而且會開始轉場。它們會在轉場開始後立即傳回呼叫者，但在轉場結束之前。此外，對正在轉場的元件進行的方法呼叫將會被忽略。在我們的 JavaScript 文件中了解更多資訊。

方法	說明
`dispose`	隱藏元素的提示。您的提示將會保留在 DOM 中，但不會再顯示。
`getInstance`	靜態方法，允許您取得與 DOM 元素關聯的提示執行個體。例如：`const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getInstance(myToastEl)` 傳回 Bootstrap 提示執行個體。
`getOrCreateInstance`	靜態方法，允許您取得與 DOM 元素關聯的提示執行個體，或是在尚未初始化的情況下建立一個新的執行個體。 `const myToastEl = document.getElementById('myToastEl')` `const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)` 傳回 Bootstrap 提示實例。
`hide`	隱藏元素的提示。在提示實際隱藏前傳回呼叫者（即在 `hidden.bs.toast` 事件發生前）。如果您將 `autohide` 設定為 `false`，您必須手動呼叫此方法。
`isShown`	根據提示的可見度狀態傳回布林值。
`show`	顯示元素的提示。在提示實際顯示前傳回呼叫者（即在 `shown.bs.toast` 事件發生前）。您必須手動呼叫此方法，否則您的提示不會顯示。

事件

事件	說明
`hide.bs.toast`	當呼叫 `hide` 實例方法時，此事件會立即觸發。
`hidden.bs.toast`	當提示完成對使用者隱藏時，此事件會觸發。
`show.bs.toast`	當呼叫 `show` 實例方法時，此事件會立即觸發。
`shown.bs.toast`	當提示對使用者顯示時，此事件會觸發。

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})