Toasts提示框

~~Push notifications to your visitors with a toast, a lightweight and easily customizable alert message.~~通过toast（一种轻量级且易于定制的警报消息）向访客推送通知。

~~On this page~~本页内容

~~Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems.~~ Toasts是一种轻量级通知，旨在模仿移动和桌面操作系统已经普及的推送通知。~~They’re built with flexbox, so they’re easy to align and position.~~它们采用flexbox制造，因此易于对齐和定位。

Overview概述

~~Things to know when using the toast plugin:~~使用toast插件时需要了解的事项：

~~Toasts are opt-in for performance reasons, so you must initialize them yourself.~~出于性能原因，提示框是可选的，所以您必须自己初始化它们。
~~Toasts will automatically hide if you do not specify autohide: false.~~如果未指定autohide: false，则提示框将自动隐藏。

~~The animation effect of this component is dependent on the prefers-reduced-motion media query.~~ 此组件的动画效果取决于prefers-reduced-motion媒体查询。~~See the reduced motion section of our accessibility documentation.~~请参阅我们的易访问性文档中的简化运动部分。

Examples例子

Basic基本的

~~To encourage extensible and predictable toasts, we recommend a header and body.~~ 为了鼓励可扩展和可预测的提示框，我们建议使用标题和正文。~~Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.~~Toast标题使用display:flex，由于我们的margin和flexbox实用程序，允许轻松对齐内容。

~~Toasts are as flexible as you need and have very little required markup.~~ 烤面包机可以根据您的需要灵活使用，而且所需的标记很少。~~At a minimum, we require a single element to contain your “toasted” content and strongly encourage a dismiss button.~~至少，我们需要一个元素来包含您的“提示框”内容，并强烈鼓励使用“撤除”按钮。

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>

~~Previously, our scripts dynamically added the .hide class to completely hide a toast (with display:none, rather than just with opacity:0).~~ 以前，我们的脚本动态添加了.hide类以完全隐藏提示框（使用display:none，而并非仅使用opacity:0）。T~~his is now not necessary anymore.~~ 他现在不再需要了。~~However, for backwards compatibility, our script will continue to toggle the class (even though there is no practical need for it) until the next major version.~~但是，为了向后兼容，我们的脚本将继续切换该类（即使没有实际需要），直到下一个主要版本。

Live example实例

~~Click the button below to show a toast (positioned with our utilities in the lower right corner) that has been hidden by default.~~单击下面的按钮以显示默认情况下隐藏的toast（位于右下角的实用程序中）。

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: 11">
<div id="liveToast" 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>

~~We use the following JavaScript to trigger our live toast demo:~~我们使用以下JavaScript触发live toast演示：

var toastTrigger = document.getElementById('liveToastBtn')
var toastLiveExample = document.getElementById('liveToast')
if (toastTrigger) {
toastTrigger.addEventListener('click', function () {
var toast = new bootstrap.Toast(toastLiveExample)
toast.show()
})
}

Translucent半透明的

~~Toasts are slightly translucent to blend in with what’s below them.~~烤面包是半透明的，可以和下面的东西混合在一起。

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>

Stacking堆叠

~~You can stack toasts by wrapping them in a toast container, which will vertically add some spacing.~~你可以把提示框包在一个提示框容器里，这样可以在垂直方向上增加一些间距。

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>

Custom content自定义内容

~~Customize your toasts by removing sub-components, tweaking them with utilities, or by adding your own markup.~~ 通过删除子组件、使用实用程序调整它们或添加自己的标记来自定义您的祝酒词。~~Here we’ve created a simpler toast by removing the default .toast-header, adding a custom hide icon from Bootstrap Icons, and using some flexbox utilities to adjust the layout.~~在这里，我们创建了一个更简单的toast，方法是删除默认.toast-header，从Bootstrap Icons中添加自定义隐藏图标，并使用一些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>

~~Alternatively, you can also add additional controls and components to toasts.~~或者，您也可以向提示框添加其他控件和组件。

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>

Color schemes配色方案

~~Building on the above example, you can create different toast color schemes with our color and background utilities.~~ 基于以上示例，您可以使用颜色和背景实用程序创建不同的提示框颜色方案。~~Here we’ve added .bg-primary and .text-white to the .toast, and then added .btn-close-white to our close button.~~ 在这里，我们向.toast添加了.bg-primary和.text-white，然后向关闭按钮添加了.btn-close-white。~~For a crisp edge, we remove the default border with .border-0.~~为了获得清晰的边缘，我们删除了.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>

Placement位置

~~Place toasts with custom CSS as you need them.~~ 根据需要放置带有自定义CSS的烤面包。~~The top right is often used for notifications, as is the top middle.~~ 右上角和中上角通常用于通知。~~If you’re only ever going to show one toast at a time, put the positioning styles right on the .toast.~~如果你一次只展示一个提示框，请将定位样式正确地放在.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>

~~For systems that generate more notifications, consider using a wrapping element so they can easily stack.~~对于生成更多通知的系统，请考虑使用包装元素，这样它们就可以很容易地堆栈。

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>

~~You can also get fancy with flexbox utilities to align toasts horizontally and/or vertically.~~您还可以使用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>

Accessibility可访问性

~~Toasts are intended to be small interruptions to your visitors or users, so to help those with screen readers and similar assistive technologies, you should wrap your toasts in an aria-live region.~~ 提示框会对访问者或用户来说只是一个小小的干扰，所以为了帮助那些使用屏幕阅读器和类似辅助技术的人，你应该把提示框放在一个aria-live区域中。~~Changes to live regions (such as injecting/updating a toast component) are automatically announced by screen readers without needing to move the user’s focus or otherwise interrupt the user.~~ 对活动区域的更改（如注入/更新toast组件）由屏幕阅读器自动宣布，而无需移动用户的焦点或以其他方式打断用户。Additionally, include aria-atomic="true" to ensure that the entire toast is always announced as a single (atomic) unit, rather than just announcing what was changed (which could lead to problems if you only update part of the toast’s content, or if displaying the same toast content at a later point in time). 此外，包括aria-atomic="true"确保整个提示框始终作为单个（原子）单元发布，而不仅仅是发布更改的内容（如果只更新吐司的部分内容，或者稍后显示相同的吐司内容，这可能会导致问题）。~~If the information needed is important for the process, e.g. for a list of errors in a form, then use the alert component instead of toast.~~如果所需的信息对流程很重要，例如表单中的错误列表，则使用警告组件而不是提示框。

~~Note that the live region needs to be present in the markup before the toast is generated or updated.~~ 请注意，在生成或更新提示之前，活动区域需要出现在标记中。~~If you dynamically generate both at the same time and inject them into the page, they will generally not be announced by assistive technologies.~~如果您同时动态生成这两个文件并将它们注入页面，辅助技术通常不会公布它们。

~~You also need to adapt the role and aria-live level depending on the content.~~ 您还需要根据内容调整role和aria-live级别。~~If it’s an important message like an error, use role="alert" aria-live="assertive", otherwise use role="status" aria-live="polite" attributes.~~如果是一条重要消息，如错误，请使用role="alert" aria-live="assertive"属性，否则使用role="status" aria-live="polite"属性。

~~As the content you’re displaying changes, be sure to update the delay timeout so that users have enough time to read the toast.~~当您显示的内容发生更改时，请确保更新delay超时，以便用户有足够的时间阅读提示框。

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

~~When using autohide: false, you must add a close button to allow users to dismiss the toast.~~使用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>

~~While technically it’s possible to add focusable/actionable controls (such as additional buttons or links) in your toast, you should avoid doing this for autohiding toasts.~~ 虽然从技术上讲，可以在toast中添加可聚焦/可操作的控件（如附加按钮或链接），但对于自动隐藏toast，应该避免这样做。Even if you give the toast a long delay timeout, keyboard and assistive technology users may find it difficult to reach the toast in time to take action (since toasts don’t receive focus when they are displayed). 即使你给烤面包片一个长时间的delay超时，键盘和辅助技术用户可能会发现很难及时到达烤面包片以采取行动（因为烤面包片在显示时不会获得焦点）。~~If you absolutely must have further controls, we recommend using a toast with autohide: false.~~如果您绝对需要进一步的控制，我们建议使用带有autohide: false的提示框。

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

Usage用法

~~Initialize toasts via JavaScript:~~通过JavaScript初始化提示框：

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

Triggers触发器

~~Dismissal can be achieved with the data attribute on a button within the toast as demonstrated below:~~可以通过提示框中按钮上的data属性实现撤除，如下所示：

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

~~or on a button outside the toast using the data-bs-target as demonstrated below:~~或者在提示框外部的按钮上使用data-bs-target，如下所示：

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Options选项

~~Options can be passed via data attributes or JavaScript.~~ 选项可以通过数据属性或JavaScript传递。~~For data attributes, append the option name to data-bs-, as in data-bs-animation="".~~对于数据属性，将选项名称附加到data-bs-，如data-bs-animation=""。

~~Name~~名称	~~Type~~类型	~~Default~~默认值	~~Description~~描述
`animation`	boolean	`true`	~~Apply a CSS fade transition to the toast~~将CSS淡入过渡应用于烤面包片
`autohide`	boolean	`true`	~~Auto hide the toast~~自动隐藏烤面包
`delay`	number	`5000`	~~Delay hiding the toast (ms)~~延迟隐藏提示框（毫秒）

Methods方法

Asynchronous methods and transitions异步方法和转换

~~All API methods are asynchronous and start a transition.~~ 所有API方法都是异步的，并开始过渡。~~They return to the caller as soon as the transition is started but before it ends.~~ 转换一开始，但在过渡结束之前，它们就返回给调用方。~~In addition, a method call on a transitioning component will be ignored.~~此外，对过渡组件的方法调用将被忽略。

~~See our JavaScript documentation for more information.~~有关更多信息，请参阅我们的JavaScript文档。

show

~~Reveals an element’s toast.~~ 显示元素的提示框。~~Returns to the caller before the toast has actually been shown~~在提示框实际显示之前返回给调用者 ~~(i.e. before the shown.bs.toast event occurs).~~（即，在shown.bs.toast事件发生之前）。 ~~You have to manually call this method, instead your toast won’t show.~~您必须手动调用此方法，否则您的提示框将不会显示。

toast.show()

hide

~~Hides an element’s toast.~~ 隐藏元素的提示框。~~Returns to the caller before the toast has actually been hidden~~在土司实际隐藏之前返回给调用方 ~~(i.e. before the hidden.bs.toast event occurs).~~ （即在hidden.bs.toast事件发生之前）。~~You have to manually call this method if you made autohide to false.~~如果将autohide设置为false，则必须手动调用此方法。

toast.hide()

dispose

~~Hides an element’s toast.~~ 隐藏元素的提示框。~~Your toast will remain on the DOM but won’t show anymore.~~您的提示框将保留在DOM上，但不再显示。

toast.dispose()

getInstance

Static method which allows you to get the toast instance associated with a DOM element静态方法，该方法允许您获取与DOM元素关联的toast实例

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance

getOrCreateInstance

Static method which allows you to get the toast instance associated with a DOM element, or create a new one in case it wasn’t initialised静态方法，它允许您获取与DOM元素关联的toast实例，或者在未初始化的情况下创建一个新实例

var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance

Events事件

~~Event type~~事件类型	~~Description~~描述
`show.bs.toast`	~~This event fires immediately when the `show` instance method is called.~~调用`show`实例方法时，此事件立即激发。
`shown.bs.toast`	~~This event is fired when the toast has been made visible to the user.~~当提示框对用户可见时，将触发此事件。
`hide.bs.toast`	~~This event is fired immediately when the `hide` instance method has been called.~~调用`hide`实例方法后，将立即触发此事件。
`hidden.bs.toast`	~~This event is fired when the toast has finished being hidden from the user.~~当提示框对用户隐藏完毕时，将触发此事件。

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