跳到主要內容 跳到文檔導航
Check
in English

敬酒

通過 toast、輕量級且易於自定義的警報消息向您的訪問者推送通知。

在本頁面

Toast 是輕量級通知，旨在模仿移動和桌面操作系統已經普及的推送通知。它們是用 flexbox 構建的，因此它們很容易對齊和定位。

概述

使用 toast 插件時要知道的事情：

  • 出於性能原因，Toast 是可選的，因此您必須自己初始化它們。
  • 如果你不指定 Toasts 會自動隱藏autohide: false。
該組件的動畫效果依賴於 prefers-reduced-motion媒體查詢。請參閱 我們可訪問性文檔的減少運動部分。

例子

基本的

為了鼓勵可擴展和可預測的 toast，我們建議使用 header 和 body。Toast headers 使用display: flex，由於我們的 margin 和 flexbox 實用程序，可以輕鬆對齊內容。

Toast 可以根據您的需要靈活使用，並且所需的標記非常少。至少，我們需要一個元素來包含您的“烤”內容，並強烈建議使用關閉按鈕。

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類以完全隱藏 toast（使用 display:none，而不僅僅是使用 opacity:0）。現在不再需要了。但是，為了向後兼容，我們的腳本將繼續切換類（即使實際上沒有必要），直到下一個主要版本。

活生生的例子

單擊下面的按鈕以顯示默認隱藏的 toast（與我們的實用程序一起位於右下角）。

<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 來觸發我們的現場吐司演示：

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
  toastTrigger.addEventListener('click', () => {
    const toast = new bootstrap.Toast(toastLiveExample)

    toast.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-muted">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-muted">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-muted">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。在這裡，我們通過刪除 default 創建了一個更簡單的 toast，從Bootstrap Icons.toast-header添加自定義隱藏圖標，並使用一些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>

或者，您還可以向 toast 添加其他控件和組件。

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>

配色方案

在上述示例的基礎上，您可以使用我們的顏色和背景實用程序創建不同的吐司配色方案。在這裡，我們添加.text-bg-primary了.toast，然後添加.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，請將定位樣式放在.toast.

引導程序 11 分鐘前
你好世界！這是一個祝酒詞。
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-dark position-relative bd-example-toasts">
  <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-muted">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-muted">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 實用程序來水平和/或垂直對齊 toast。

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>

可訪問性

Toast 旨在對您的訪問者或用戶造成小的干擾，因此為了幫助那些使用屏幕閱讀器和類似輔助技術的人，您應該將 Toast 包裝在一個aria-live區域中。屏幕閱讀器會自動宣布對活動區域的更改（例如注入/更新 toast 組件），而無需移動用戶的焦點或以其他方式打斷用戶。此外，包括aria-atomic="true"以確保始終將整個 toast 宣佈為單個（原子）單元，而不是僅僅宣布更改的內容（如果您只更新 toast 的部分內容，或者顯示相同的 toast 內容，這可能會導致問題在稍後的時間點）。如果所需的信息對流程很重要，例如表單中的錯誤列表，則使用警報組件而不是吐司。

請注意，在生成或更新 toast之前，活動區域需要存在於標記中。如果同時動態生成兩者並註入到頁面中，一般不會被輔助技術公佈。

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

隨著您顯示的內容髮生變化，請務必更新delay超時，以便用戶有足夠的時間閱讀 toast。

<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，您必須添加一個關閉按鈕以允許用戶關閉 toast。

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>

雖然從技術上講，可以在 toast 中添加可聚焦/可操作的控件（例如附加按鈕或鏈接），但您應該避免為自動隱藏 toast 執行此操作。即使您讓 toast 長時間delay超時，鍵盤和輔助技術用戶也可能會發現很難及時到達 toast 以採取行動（因為 toast 在顯示時不會獲得焦點）。如果您絕對必須有進一步的控制，我們建議使用帶有autohide: false.

CSS

變量

在 v5.2.0 中添加

作為 Bootstrap 不斷發展的 CSS 變量方法的一部分，toast 現在使用本地 CSS 變量.toast來增強實時自定義。CSS 變量的值是通過 Sass 設置的，因此仍然支持 Sass 自定義。

  --#{$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 變量

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

$toast-header-color:                $gray-600;
$toast-header-background-color:     rgba($white, .85);
$toast-header-border-color:         rgba($black, .05);

用法

通過 JavaScript 初始化 toast：

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

觸發器

可以使用toastdata中按鈕上的屬性來實現解僱，如下所示：

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

或在toast 外部的按鈕上使用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並且單獨的數據屬性將覆蓋給定的值 on data-bs-config。此外，現有數據屬性能夠容納 JSON 值，例如data-bs-delay='{"show":0,"hide":150}'.

姓名 類型 默認 描述
animation 布爾值 true 對 toast 應用 CSS 淡入淡出過渡。
autohide 布爾值 true 延遲後自動隱藏吐司。
delay 數字 5000 在隱藏 toast 之前延遲毫秒。

方法

異步方法和轉換

所有 API 方法都是異步的並開始一個轉換。他們在轉換開始但在結束之前立即返回給調用者。此外，過渡組件上的方法調用將被忽略。

有關更多信息，請參閱我們的 JavaScript 文檔。

方法 描述
dispose 隱藏元素的吐司。您的 toast 將保留在 DOM 上，但不會再顯示。
getInstance 允許您獲取與 DOM 元素關聯的 toast 實例的靜態方法。
例如：const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getInstance(myToastEl)返回一個 Bootstrap toast 實例。
getOrCreateInstance 靜態方法，允許您獲取與 DOM 元素關聯的 toast 實例，或創建一個新實例，以防它未初始化。
const myToastEl = document.getElementById('myToastEl') const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)返回一個 Bootstrap toast 實例。
hide 隱藏元素的吐司。在 toast 實際被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.toast如果你做了，你必須手動調用這個autohide方法false。
isShown 根據 toast 的可見性狀態返回一個布爾值。
show 顯示元素的吐司。在 toast 實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.toast您必須手動調用此方法，而不是您的 toast 不會顯示。

活動

事件 描述
hide.bs.toast hide調用實例方法時立即觸發此事件。
hidden.bs.toast 當 toast 完成對用戶隱藏時觸發此事件。
show.bs.toast show調用實例方法時立即觸發此事件。
shown.bs.toast 當 toast 對用戶可見時觸發此事件。 
const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})