在 GitHub 上檢視

提示

使用提示，一種輕量且容易自訂的警示訊息，將推播通知推播給你的訪客。

提示是輕量級的通知，設計用來模仿行動和桌上型作業系統普及的推播通知。它們使用彈性盒狀模型建置，因此容易對齊和定位。

概觀

使用提示外掛程式時需要注意的事項

  • 如果你從原始碼建置我們的 JavaScript，它 需要 util.js。
  • 提示基於效能考量而採用選用方式，因此 你必須自行初始化。
  • 請注意，你負責定位提示。
  • 如果你沒有指定 autohide: false，提示會自動隱藏。
此元件的動畫效果依賴於 prefers-reduced-motion 媒體查詢。請參閱 無障礙文件中的減少動作區段。

範例

基本

為了鼓勵可擴充且可預測的提示，我們建議使用標題和內文。提示標題使用 display: flex，由於我們的邊距和彈性盒狀模型工具，因此可以輕鬆對齊內容。

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

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

即時

按一下下方按鈕以顯示提示訊息（使用我們的工具程式放置在右下角），預設會使用 .hide 隱藏。

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

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

半透明

提示訊息會稍微透明，以便與下方內容融合。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

堆疊

當您有多則提示訊息時，我們預設會垂直堆疊它們，以便閱讀。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

放置

根據需要使用自訂 CSS 放置提示訊息。右上角通常用於通知，而正上方則用於中上。如果您一次只會顯示一則提示訊息，請將定位樣式直接套用在 .toast 上。

- Bootstrap 框架 Bootstrap 11 分鐘前
哈囉，世界！這是一則提示訊息。 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

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

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

您也可以使用彈性盒工具程式來對齊提示訊息的水平和/或垂直方向。

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </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-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

使用 autohide: false 時，您必須新增一個關閉按鈕，讓使用者可以關閉提示。

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

雖然技術上可以在提示中新增可聚焦/可操作的控制項（例如其他按鈕或連結），但您應避免對自動隱藏提示這麼做。即使您給提示一個很長的delay 超時，鍵盤和輔助技術使用者可能還是很難及時存取提示以採取行動（因為提示在顯示時不會接收焦點）。如果您絕對必須有其他控制項，我們建議使用 autohide: false 的提示。

JavaScript 行為

使用

透過 JavaScript 初始化提示

$('.toast').toast(option)

選項

選項可以透過資料屬性或 JavaScript 傳遞。對於資料屬性，將選項名稱附加到 data-，例如 data-animation=""。

名稱 類型 預設值 說明
animation 布林值 true 對提示套用 CSS 淡入淡出轉場
autohide 布林值 true 自動隱藏提示
delay 數字 500 隱藏提示的延遲時間 (毫秒)

方法

非同步方法和轉場

所有 API 方法都是非同步的，並會啟動轉場。它們會在轉場啟動後立即傳回呼叫者，但在轉場結束之前。此外，對轉場中元件的方法呼叫將會被忽略。

請參閱我們的 JavaScript 文件以取得更多資訊.

$().toast(options)

將提示處理常式附加到元素集合。

.toast('show')

顯示元素的提示。在提示實際顯示之前傳回呼叫者（即在 shown.bs.toast 事件發生之前）。您必須手動呼叫此方法，否則您的提示不會顯示。

$('#element').toast('show')

.toast('hide')

隱藏元素的提示。在提示實際隱藏之前傳回呼叫者（即在 hidden.bs.toast 事件發生之前）。如果您將 autohide 設為 false，則必須手動呼叫此方法。

$('#element').toast('hide')

.toast('dispose')

隱藏元素的提示。您的提示將保留在 DOM 中，但不會再顯示。

$('#element').toast('dispose')

事件

事件類型 說明
show.bs.toast 當呼叫 show 執行個體方法時，此事件會立即觸發。
shown.bs.toast 當吐司對使用者可見時，會觸發此事件。
hide.bs.toast 當呼叫 hide 執行個體方法時，會立即觸發此事件。
hidden.bs.toast 當吐司對使用者隱藏完成時，會觸發此事件。 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})