吐司消息（Toasts）

通過Toasts向使用者推播通知，它是一種輕量且易于客制化的警報消息

On this page

吐司（Toasts）是一種輕量級通知，旨在模仿移動和桌面操作系統已經普及的推送通知。它們是用flexbox構建的，所以它們很容易對齊和定位。

概述

使用toast插件時需要注意的事項：

出于性能原因吐司是選擇性加入的，所以您必須自己將它們初始化。
如果你沒有指定autohide: false，吐司會自動隱藏。

該組件的動畫效果取決于偏好減少的運動媒體查詢。請參閱我們的可訪問性文檔的簡化運動部分。

示例

基礎

為了支持可擴充性和可預測性的吐司，我們建議加入標題和正文。基于我們的margin和flexbox通用類別，吐司的標題使用display:flex 輕松就能對齊內容。

吐司元件可靈活的配合需要，并且只需要很少的標記。我們至少需要一個單獨的元素來包裝您“套用吐司樣式”的內容，并強烈建議加上關閉按鈕。

Hello, world! This is a toast message.

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

實例

單擊下面的按鈕顯示為toast（在右下角使用我們的實用程序定位），默認情況下已使用.hide隱藏。

Hello, world! This is a toast message.

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

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 5">
<div id="liveToast" class="toast hide" 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>

半透明的

吐司也可以是半透明的，因此能混合在它們可能出現的任何東西上。在支持CSS屬性backdrop-filter的瀏覽器，我們還會嘗試對吐司下方的元素進行模糊效果。

Hello, world! This is a toast message.

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

堆疊

可以透過將吐司包裝于toast container來推疊它們，這將會在垂直方向上增加一些間距。

See? Just like this.

Heads up, toasts will stack automatically

<div class="toast-container">
<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-header、從Bootstrap Icons添加一個自定義的隱藏icon，并使用一些flexbox通用類別調整排版，以建立一個更簡單的吐司。

Hello, world! This is a toast message.

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

另外，您也可以在吐司添加額外的控件與元件。

Hello, world! This is a toast message.

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

配色方案

基于以上的示例，您也可以透過我們的顏色通用類別建立不同的吐司配色方案。以下我們將.bg-primary與.text-white添加到.toast，再把.text-white添加到關閉按鈕上。為了讓邊緣清晰顯示，我們透過.border-0移除了預設的邊框。

Hello, world! This is a toast message.

<div class="toast align-items-center text-white 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上。

Hello, world! This is a toast message.

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

對于會推播更多通知的系統，請考慮使用包裝元素的方式，讓它們可以堆疊顯示。

See? Just like this.

Heads up, toasts will stack automatically

<div aria-live="polite" aria-atomic="true" class="position-relative">
<!-- Position it: -->
<!-- - `.toast-container` for spacing between toasts -->
<!-- - `.position-absolute`, `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 position-absolute 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通用類別來對吐司做水平和/或垂直的對齊。

Hello, world! This is a toast message.

<!-- 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 region中。屏幕閱讀器會自動讀出live region中的改變（例如：插入/更新吐司元件），而不需要轉移用戶的焦點或以其他方式中斷用戶。另外，加入aria-atomic=“true”以確保整個吐司元件都會被讀取為單一個（atomic）單位，而不只是讀出改變的部分（如果你只更新部分吐司的內容，或者在稍后的時間點顯示相同的吐司內容，將可能會導致問題）。如果所要顯示的信息對于該處理程序是很重要的，例如：表單中的錯誤列表，請使用警報（Alerts）元件而不是吐司。

請注意，在生成或更新吐司之前，必須在標記中包含活動區域（live region）。如果您同時動態生成兩者并將它們插入頁面，則輔助技術通常不會讀出它們。

你還需要根據內容調整role和aria-live的等級。如果它是一個重要的信息，例如：錯誤訊息，請使用role=“alert”aria-live=“assertive”，否則請使用role=“status”aria-live=“polite”屬性。

當您顯示的內容有改變時，請務必更新delay timeout以確保使用者有足夠的時間閱讀吐司。

<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時，必須增加一個關閉的按鈕，讓用戶可以關閉吐司。

Hello, world! This is a toast message.

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

Sass

Variables

$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:                1px;
$toast-border-color:                rgba(0, 0, 0, .1);
$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(0, 0, 0, .05);

用法

透過JavaScript啟用吐司：

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})

選項

選項可以透過數據屬性或是JavaScript傳遞。對于數據屬性，將選項名稱附加到data-bs-，如：data-bs-animation=“”。

Name	Type	Default	Description
`animation`	boolean	`true`	在吐司應用CSS fade轉換效果
`autohide`	boolean	`true`	自動將吐司隱藏
`delay`	number	`5000`	D延遲隱藏吐司（ms）延遲隱藏吐司（ms）

方法

Asynchronous methods and transitions

異步方法和轉換所有API方法都是異步的，并開始轉換。轉換一開始就返回到調用方，但在轉換結束之前返回。此外，對轉換組件的方法調用將被忽略。有關更多信息，請參閱我們的JavaScript文檔。

顯示

展示一個元素的吐司。在吐司實際被展示前回傳給調用者（即在shown.bs.toast事件發生前）。你必須手動調用此方法，否則吐司不會被展示。

toast.show()

隱藏

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

toast.hide()

注銷

移除，隱藏一個元素的吐司。您的吐司元件將保留在DOM上，但不會再顯示。

toast.dispose()

事件

Event type	Description
`show.bs.toast`	當調用show方法時，此事件會立即觸發。
`shown.bs.toast`	當使用者可看見吐司元素時，會觸發此事件。
`hide.bs.toast`	當調用hide方法時，此事件會立即觸發。
`hidden.bs.toast`	對使用者隱藏了一個吐司元素時，會觸發此事件.

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