吐司消息（Toasts）

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

On this page

吐司（Toasts）是一種輕量級(jí)通知，旨在模仿移動(dòng)和桌面操作系統(tǒng)已經(jīng)普及的推送通知。它們是用flexbox構(gòu)建的，所以它們很容易對(duì)齊和定位。

概述

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

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

該組件的動(dòng)畫效果取決于偏好減少的運(yùn)動(dòng)媒體查詢。請(qǐng)參閱我們的可訪問(wèn)性文檔的簡(jiǎn)化運(yùn)動(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)閉按鈕。

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>

實(shí)例

單擊下面的按鈕顯示為toast（在右下角使用我們的實(shí)用程序定位），默認(rèn)情況下已使用.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>

半透明的

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

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>

堆疊

可以透過(guò)將吐司包裝于toast container來(lái)推疊它們，這將會(huì)在垂直方向上增加一些間距。

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>

自定義內(nèi)容

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

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>

配色方案

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

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>

定位

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

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

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

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>

可達(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)閉吐司。

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

用法

透過(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方法都是異步的，并開(kāi)始轉(zhuǎn)換。轉(zhuǎn)換一開(kāi)始就返回到調(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...
})