吐司消息（Toasts）
通過(guò)Toasts向使用者推播通知，它是一種輕量且易于客制化的警報(bào)消息
吐司（Toasts）是一種輕量級(jí)通知，旨在模仿移動(dòng)和桌面操作系統(tǒng)已經(jīng)普及的推送通知。它們是用flexbox構(gòu)建的，所以它們很容易對(duì)齊和定位。
概述
使用toast插件時(shí)需要注意的事項(xiàng)：
- 出于性能原因吐司是選擇性加入的，所以您必須自己將它們初始化。
- 如果你沒(méi)有指定autohide: false，吐司會(huì)自動(dòng)隱藏。
示例
基礎(chǔ)
為了支持可擴(kuò)充性和可預(yù)測(cè)性的吐司，我們建議加入標(biāo)題和正文。基于我們的margin和flexbox通用類別，吐司的標(biāo)題使用display:flex 輕松就能對(duì)齊內(nèi)容。
吐司元件可靈活的配合需要，并且只需要很少的標(biāo)記。我們至少需要一個(gè)單獨(dú)的元素來(lái)包裝您“套用吐司樣式”的內(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>堆疊
可以透過(guò)將吐司包裝于toast container來(lái)推疊它們，這將會(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)容
透過(guò)移除子元件、調(diào)整通用類別或是增加標(biāo)記以自定義吐司。以下我們透過(guò)移除預(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>配色方案
基于以上的示例，您也可以透過(guò)我們的顏色通用類別建立不同的吐司配色方案。以下我們將.bg-primary與.text-white添加到.toast，再把.text-white添加到關(guān)閉按鈕上。為了讓邊緣清晰顯示，我們透過(guò).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通用類別來(lái)對(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ì)于訪問(wèn)者或用戶來(lái)說(shuō)是一個(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)致問(wèn)題）。如果所要顯示的信息對(duì)于該處理程序是很重要的，例如：表單中的錯(cuò)誤列表，請(qǐng)使用警報(bào)（Alerts）元件而不是吐司。
請(qǐng)注意，在生成或更新吐司之前，必須在標(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>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);
用法
透過(guò)JavaScript啟用吐司：
var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})
選項(xiàng)
選項(xiàng)可以透過(guò)數(shù)據(jù)屬性或是JavaScript傳遞。對(duì)于數(shù)據(jù)屬性，將選項(xiàng)名稱附加到data-bs-，如：data-bs-animation=“”。
| Name | Type | Default | Description |
|---|---|---|---|
animation |
boolean | true |
在吐司應(yīng)用CSS fade轉(zhuǎn)換效果 |
autohide |
boolean | true |
自動(dòng)將吐司隱藏 |
delay |
number |
5000
|
D延遲隱藏吐司（ms）延遲隱藏吐司（ms） |
方法
Asynchronous methods and transitions
異步方法和轉(zhuǎn)換 所有API方法都是異步的，并開始轉(zhuǎn)換。轉(zhuǎn)換一開始就返回到調(diào)用方，但在轉(zhuǎn)換結(jié)束之前返回。此外，對(duì)轉(zhuǎn)換組件的方法調(diào)用將被忽略。 有關(guān)更多信息，請(qǐng)參閱我們的JavaScript文檔。
顯示
展示一個(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()
事件
| Event type | Description |
|---|---|
show.bs.toast |
當(dāng)調(diào)用show方法時(shí)，此事件會(huì)立即觸發(fā)。 |
shown.bs.toast |
當(dāng)使用者可看見(jiàn)吐司元素時(shí)，會(huì)觸發(fā)此事件。 |
hide.bs.toast |
當(dāng)調(diào)用hide方法時(shí)，此事件會(huì)立即觸發(fā)。 |
hidden.bs.toast |
對(duì)使用者隱藏了一個(gè)吐司元素時(shí)，會(huì)觸發(fā)此事件. |
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})