吐司消息（Toasts）
通過Toasts向使用者推播通知，它是一種輕量且易于客制化的警報消息
On this page
吐司（Toasts）是一種輕量級通知，旨在模仿移動和桌面操作系統已經普及的推送通知。它們是用flexbox構建的，所以它們很容易對齊和定位。
概述
使用toast插件時需要注意的事項：
- 出于性能原因吐司是選擇性加入的，所以您必須自己將它們初始化。
- 如果你沒有指定autohide: false，吐司會自動隱藏。
該組件的動畫效果取決于偏好減少的運動媒體查詢。請參閱我們的可訪問性文檔的簡化運動部分。
示例
基礎
為了支持可擴充性和可預測性的吐司，我們建議加入標題和正文?；谖覀兊膍argin和flexbox通用類別，吐司的標題使用display:flex 輕松就能對齊內容。
吐司元件可靈活的配合需要，并且只需要很少的標記。我們至少需要一個單獨的元素來包裝您“套用吐司樣式”的內容，并強烈建議加上關閉按鈕。
Bootstrap
11 mins ago
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隱藏。
Bootstrap
11 mins ago
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的瀏覽器，我們還會嘗試對吐司下方的元素進行模糊效果。
Bootstrap
11 mins ago
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來推疊它們，這將會在垂直方向上增加一些間距。
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
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上。
Bootstrap
11 mins ago
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>對于會推播更多通知的系統，請考慮使用包裝元素的方式，讓它們可以堆疊顯示。
Bootstrap
just now
See? Just like this.
Bootstrap
2 seconds ago
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通用類別來對吐司做水平和/或垂直的對齊。
Bootstrap
11 mins ago
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時，必須增加一個關閉的按鈕，讓用戶可以關閉吐司。
Bootstrap
11 mins ago
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...
})