在GitHub上查看

弹出提示框

推送一个带有弹出提示框的通知来给你的访客，它是一个轻量级的，并且容易定制的警告信息。

本页导航↓

弹出提示框是一种轻量级通知，旨在模仿在移动和桌面操作系统中流行的推送通知。它们是用flex制作的，所以很容易对齐和定位。

概述

当你在使用弹出提示框的时候你需要知道的东西：

  • 出于性能考虑，可以选择加入弹出提示框，因此你必须初始化它们。
  • 如果您没有指定 autohide: false, 弹出提示框将自动隐藏
此组件的动画效果依赖于 prefers-reduced-motion 媒体查询。请参阅我们的可访问文档的reduce motion部分。

示例

默认提示框

为了支持可扩展和可预测的弹出提示框，我们建议使用标题和正文。弹出提示框的标题使用 display: flex，由于我们的边距和flex实用工具，所以可以轻松对齐内容。

弹出开框非常的灵活，几乎没有必要的标记内容。最低限度，我们只要求一个元素包含你的“弹出框”的内容，并很大限度的支持取消按钮。

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

透明提示框

弹出框也可以是半透明的，所以它们可以混合在任何可能出现的东西上。对于支持 backdrop-filter CSS属性的浏览器，我们还将尝试模糊弹出框下的元素。

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

叠加提示框

你可以把弹出框包裹在另一个弹出框容器里，这样会造成垂直地增加一些间距。

<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 图标中添加了一个自定义隐藏图标， 并使用一些flex实用工具来调整布局，从而创建了一个更简单的toast。

<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</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>

配色方案

在上述示例的基础上，您可以使用我们的颜色工具创建不同的弹出框颜色方案。在这里，我们在 .toast 中 添加了 .bg-primary 和 .text-white，然后在关闭按钮中添加了 .text-white 。对于清晰的边缘，我们使用 .border-0删除默认边框。 

<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>

提示框的定位

根据需要使用自定义CSS放置弹出框。右上角经常用于通知，右上角中间也是如此。如果你每次只显示一个吐司，把定位样式直接放在 .toast 上。

Bootstrap 11 mins ago
Hello, world! This is a toast message. 
<form>
<div class="form-group 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>

对于生成更多通知的系统，可以考虑使用包装元素，这样它们就可以容易地堆叠起来。

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

你还可以使用flex工具来水平或垂直地对齐弹出框。

<!-- 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区域中。对活动区域的更改（例如注入/更新toast组件）由屏幕阅读器自动阅读，而无需移动用户的焦点或以其他方式中断用户。 此外，还包括 aria-atomic="true" 以确保整个toast始终作为单个（原子）单元发布， 而不是阅读更改的内容（如果只更新toast的部分内容，或者在以后显示相同的弹出框内容，则可能会导致问题）。 如果所需信息对流程很重要，例如表单中的错误列表，则使用警报组件而不是弹出框。

注意，在生成或更新弹出框之前，活动区域需要出现在标记中。如果您同时动态生成它们并将它们注入到页面中，它们通常不会由辅助技术宣布。

您还需要根据内容调整 role 和 aria-live 级别。如果是一个重要的信息，如错误，使用 role="alert" aria-live="assertive"，否则使用 role="status" aria-live="polite" 属性。

当显示的内容发生变化时，一定要更新延迟超时，以确保人们有足够的时间阅读弹出框的内容。

<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 时，你必须添加一个关闭按钮来允许用户消除弹出框。

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

用法

通过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=""。

名称 类型 默认 描述
animation boolean true 应用一个CSS渐变过渡到弹出框
autohide boolean true 自动隐藏弹出框
delay number 5000 延迟隐藏弹出框 (ms)

方法

异步方法和转换

所有API方法都是异步的，并开始转换。一旦过渡开始，它们就会在过渡结束之前返回到调用者。此外，对转换组件的方法调用将被忽略。

更多信息，请参阅我们的JavaScript文档。

显示

显示一个元素的弹出框。返回到调用者之前，弹出框实际上已经显示(即在 shown.bs.toast 事件发生之前)。您必须手动调用此方法，否则您的弹出框将不会显示。

toast.show()

隐藏

隐藏元素的弹出框。在弹出框实际上被隐藏之前(即 hidden.bs.toast 事件发生之前)返回给调用者。如果将 autohide 设置为 false，则必须手动调用此方法。 

toast.hide()

处置

隐藏元素的弹出框。你的弹出框将保留在DOM上，但不会再出现了。

toast.dispose()

事件

事件类型 描述
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...
})