Bootstrap的吐司（Toasts）是一種輕量級(jí)通知組件，旨在模仿移動(dòng)和桌面操作系統(tǒng)中常見的推送通知。它們使用flexbox布局構(gòu)建，因此很容易進(jìn)行對(duì)齊和定位。吐司組件可以在頁(yè)面的任何位置顯示，并且可以包含文本、圖像和按鈕等內(nèi)容。

你可以使用Bootstrap的類來自定義吐司的樣式和行為，例如更改背景顏色、文字顏色、動(dòng)畫效果等。通過使用Bootstrap的吐司組件，你可以輕松地向用戶提供簡(jiǎn)潔而美觀的通知信息。

一、toast插件

使用toast插件時(shí)需要注意的事項(xiàng)：

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

二、基礎(chǔ)

為了支持可擴(kuò)充性和可預(yù)測(cè)性的吐司，我們建議加入標(biāo)題和正文?；谖覀兊膍argin和flexbox通用類別，吐司的標(biāo)題使用display:flex 輕松就能對(duì)齊內(nèi)容。

吐司元件可靈活的配合需要，并且只需要很少的標(biāo)記。我們至少需要一個(gè)單獨(dú)的元素來包裝“套用吐司樣式”的內(nèi)容，并強(qiáng)烈建議加上關(guān)閉按鈕。

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

三、實(shí)例

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

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

四、半透明

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

<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來推疊它們，這將會(huì)在垂直方向上增加一些間距。

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

六、自定義內(nèi)容

透過移除子元件、調(diào)整通用類別或是增加標(biāo)記以自定義吐司。以下我們透過移除預(yù)設(shè)的.toast-header、從Bootstrap Icons添加一個(gè)自定義的隱藏icon，并使用一些flexbox通用類別調(diào)整排版，以建立一個(gè)更簡(jiǎn)單的吐司。

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

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

<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添加到關(guān)閉按鈕上。為了讓邊緣清晰顯示，我們透過.border-0移除了預(yù)設(shè)的邊框。

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

八、定位

根據(jù)需求，使用自定義的CSS指定吐司位置。右上角通常用于通知，頂部的中間也是如此。如果一次只要展示一個(gè)吐司，請(qǐng)將定位樣式放在.toast上。

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

對(duì)于會(huì)推播更多通知的系統(tǒng)，請(qǐng)考慮使用包裝元素的方式，讓它們可以堆疊顯示。

<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通用類別來對(duì)吐司做水平和/或垂直的對(duì)齊。

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

九、可達(dá)性

吐司元件對(duì)于訪問者或用戶來說是一個(gè)小小的干擾，所以為了幫助那些使用屏幕閱讀器和類似輔助技術(shù)的人，你應(yīng)該將吐司元件包裝在aria-live region中。屏幕閱讀器會(huì)自動(dòng)讀出live region中的改變（例如：插入/更新吐司元件），而不需要轉(zhuǎn)移用戶的焦點(diǎn)或以其他方式中斷用戶。

另外，加入aria-atomic=“true”以確保整個(gè)吐司元件都會(huì)被讀取為單一個(gè)（atomic）單位，而不只是讀出改變的部分（如果你只更新部分吐司的內(nèi)容，或者在稍后的時(shí)間點(diǎn)顯示相同的吐司內(nèi)容，將可能會(huì)導(dǎo)致問題）。如果所要顯示的信息對(duì)于該處理程序是很重要的，例如：表單中的錯(cuò)誤列表，請(qǐng)使用警報(bào)（Alerts）元件而不是吐司。

注意：在生成或更新吐司之前，必須在標(biāo)記中包含活動(dòng)區(qū)域（live region）。如果同時(shí)動(dòng)態(tài)生成兩者并將它們插入頁(yè)面，則輔助技術(shù)通常不會(huì)讀出它們。

你還需要根據(jù)內(nèi)容調(diào)整role和aria-live的等級(jí)。如果它是一個(gè)重要的信息，例如：錯(cuò)誤訊息，請(qǐng)使用role=“alert”aria-live=“assertive”，否則請(qǐng)使用role=“status”aria-live=“polite”屬性。

當(dāng)顯示的內(nèi)容有改變時(shí)，請(qǐng)務(wù)必更新delay timeout以確保使用者有足夠的時(shí)間閱讀吐司。

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

當(dāng)使用autohide: false時(shí)，必須增加一個(gè)關(guān)閉的按鈕，讓用戶可以關(guān)閉吐司。

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

十、用法

透過JavaScript啟用吐司：

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

1、選項(xiàng)

選項(xiàng)可以透過數(shù)據(jù)屬性或是JavaScript傳遞。對(duì)于數(shù)據(jù)屬性，將選項(xiàng)名稱附加到data-bs-，如：data-bs-animation=“”。

2、方法

顯示：

展示一個(gè)元素的吐司。在吐司實(shí)際被展示前回傳給調(diào)用者（即在shown.bs.toast事件發(fā)生前）。你必須手動(dòng)調(diào)用此方法，否則吐司不會(huì)被展示。

toast.show()

隱藏：

隱藏吐司的元素。**在吐司元素實(shí)際隱藏之前（即在hidden.bs.toast事件發(fā)生之前）回傳給調(diào)用者。如果讓autohide等于false，你必須手動(dòng)調(diào)用這個(gè)方法。

toast.hide()

注銷：

移除，隱藏一個(gè)元素的吐司。吐司元件將保留在DOM上，但不會(huì)再顯示。

toast.dispose()

十一、事件

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