跳到主题内容 跳到文档导航栏

轻量弹框(Toasts)

通过Toast，轻便且易于自定义的警报消息向访客推送通知。

在本页面

Toasts是一种轻量级通知，旨在模仿移动和桌面操作系统已经普及的推送通知。它们是用flexbox构建的，所以它们很容易对齐和定位。

概述

使用toast插件时需要注意的事项：

  • Toast是出于性能原因而选择加入的，所以您必须自己初始化它们。
  • 如果不指定autohide: false，则Toasts将自动隐藏。
此组件的动画效果取决于 prefers-reduced-motion媒体查询。请参阅我们的 可访问性文档的简化运动部分。

示例

基本

为了鼓励可扩展和可预测的 Toast，我们建议使用标题和正文。Toast标题使用 display: flex，由于我们的margin和flexbox实用程序，允许轻松对齐内容。

Toast是灵活的，因为你需要和有很少需要的标记。至少，我们需要一个单一的元素来包含您的“toasted”内容，并强烈建议取消按钮。 

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

半透明

Toast也有点半透明，所以它们会和上面可能出现的东西混合在一起。对于支持backdrop-filter CSS属性的浏览器，我们还将尝试模糊toast下的元素。

<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 包在一个 toast 容器里，这样可以在垂直方向上增加一些间隔。

<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。 在这里，我们创建了一个更简单的toast，方法是删除默认的 .toast-header，从Bootstrap Icons中添加一个自定义隐藏图标，并使用一些 flexbox 实用程序 来调整布局。

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

或者，您也可以向toasts添加其他控件和组件。

<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颜色方案。在这里，我们在.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。右上角和中上角通常用于通知。如果你一次只展示一个toast，把定位方式放在.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>

您还可以使用flexbox实用程序来水平和/或垂直对齐toast。

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

辅助功能

Toast对你的访客或用户来说是一个小小的干扰，所以为了帮助那些有屏幕阅读器和类似辅助技术的人，你应该把你的 toast 包装在一个 aria-live 区域对活动区域的更改（例如注入/更新toast组件）由屏幕阅读器自动宣布，而无需移动用户的焦点或以其他方式中断用户。另外，包括 aria-atomic="true"以确保始终将整个toast作为单个（原子）单元来宣布，而不是宣布更改的内容（如果只更新toast的部分内容，或者在稍后的时间点显示相同的toast内容，则可能会导致问题）。如果所需信息对流程很重要，例如表单中的错误列表，则使用警报组件而不是toast。

请注意，在生成或更新toast 之前 ，活动区域需要出现在标记中。如果您同时动态生成这两个内容并将它们注入页面，辅助技术通常不会公布它们。

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

当显示的内容发生变化时，请务必更新delay 超时 ，以确保人们有足够的时间阅读toast。

<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时，必须添加一个关闭按钮以允许用户关闭toast。

<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初始化toast：

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 对toast应用CSS淡入淡出过渡
autohide boolean true 自动隐藏 toast
delay number 5000 延迟隐藏 toast (ms)

方法

异步方法和转换

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

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

show

显示元素的 toast。 在实际显示toast之前返回到调用者 （即在 shown.bs.toast事件发生之前）。 您必须手动调用此方法，否则您的toast将不会显示。

toast.show()

hide

隐藏元素的 toast。 在实际隐藏toast之前返回到调用者 （即在 hidden.bs.toast事件发生之前）。 如果将autohide 设置为 false，则必须手动调用此方法。

toast.hide()

dispose

隐藏元素的toast。您的 toast将保留在DOM上，但不再显示。

toast.dispose()

事件

事件类型 描述
show.bs.toast 调用 show 实例方法时，此事件立即激发。
shown.bs.toast 当toast对用户可见时，将触发此事件。
hide.bs.toast 调用 hide实例方法时，将立即触发此事件。
hidden.bs.toast 当toast对用户隐藏完毕时，将触发此事件。 
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
  // do something...
})