Source

敬酒

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

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

概述

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

  • 如果您從源代碼構建我們的 JavaScript，它需要util.js.
  • 出於性能原因，Toast 是可選的，因此您必須自己初始化它們。
  • 請注意，您負責放置敬酒。
  • 如果你不指定 Toasts 會自動隱藏autohide: false。

該組件的動畫效果依賴於prefers-reduced-motion媒體查詢。請參閱我們可訪問性文檔的減少運動部分。

例子

基本的

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

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

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

半透明

吐司也略微半透明，因此它們混合了它們可能出現的任何東西。對於支持backdrop-filterCSS 屬性的瀏覽器，我們還將嘗試模糊 toast 下的元素。

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

堆疊

當您有多個 toast 時，我們默認以可讀的方式垂直堆疊它們。

<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，請將定位樣式放在.toast.

引導程序 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 實用程序來水平和/或垂直對齊 toast。

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-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>

可訪問性

Toast 旨在對您的訪問者或用戶造成小的干擾，因此為了幫助那些使用屏幕閱讀器和類似輔助技術的人，您應該將 Toast 包裝在一個aria-live區域中。屏幕閱讀器會自動宣布對活動區域的更改（例如注入/更新 toast 組件），而無需移動用戶的焦點或以其他方式打斷用戶。此外，包括aria-atomic="true"以確保始終將整個 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-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

使用時autohide: false，您必須添加一個關閉按鈕以允許用戶關閉 toast。

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

JavaScript 行為

用法

通過 JavaScript 初始化 toast：

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

選項

選項可以通過數據屬性或 JavaScript 傳遞。對於數據屬性，將選項名稱附加到 中data-，如data-animation="".

姓名 類型 默認 描述
動畫 布爾值 真的 對 toast 應用 CSS 淡入淡出過渡
自動隱藏 布爾值 真的 自動隱藏吐司
延遲 數字 500 延遲隱藏 toast (ms)

方法

異步方法和轉換

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

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

$().toast(options)

將 toast 處理程序附加到元素集合。

.toast('show')

顯示元素的吐司。在 toast 實際顯示之前（即在事件發生之前）返回給調用者。shown.bs.toast您必須手動調用此方法，而不是您的 toast 不會顯示。

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

.toast('hide')

隱藏元素的吐司。在 toast 實際被隱藏之前（即在事件發生之前）返回給調用者。hidden.bs.toast如果你做了，你必須手動調用這個autohide方法false。

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

.toast('dispose')

隱藏元素的吐司。您的 toast 將保留在 DOM 上，但不會再顯示。

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

活動

事件類型 描述
show.bs.toast show調用實例方法時立即觸發此事件。
顯示.bs.toast 當 toast 對用戶可見時觸發此事件。
隱藏.bs.toast hide調用實例方法時立即觸發此事件。
hidden.bs.toast 當 toast 完成對用戶隱藏時觸發此事件。 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})