在 GitHub 上查看

Toasts

使用 Toast 向您的访问者推送通知，这是一个轻量且易于自定义的警报消息。

Toasts 是轻量级通知，旨在模仿移动和桌面操作系统普及的推送通知。它们使用 flexbox 构建，因此易于对齐和定位。

概述

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

  • 如果您从源代码构建我们的 JavaScript，则它需要util.js。
  • 出于性能原因，Toasts 是选择加入的，因此您必须自己初始化它们。
  • 请注意，您负责定位 Toast。
  • 如果您未指定autohide: false，Toasts 将自动隐藏。
此组件的动画效果取决于prefers-reduced-motion媒体查询。请参阅无障碍文档的减少运动部分。

示例

基本

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

Toasts 具有您需要的灵活性，并且所需标记很少。至少，我们需要一个元素来包含您的“已烤”内容，并强烈建议使用关闭按钮。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

实时

单击下面的按钮以显示一条 Toast（使用我们的实用程序定位在右下角），该 Toast 已使用.hide默认隐藏。

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="position-fixed bottom-0 right-0 p-3" style="z-index: 5; right: 0; bottom: 0;">
  <div id="liveToast" class="toast hide" role="alert" aria-live="assertive" aria-atomic="true" data-delay="2000">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

半透明

Toasts 略微半透明，可以与它们下面的内容融为一体。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

堆叠

当您有多个 Toast 时，我们默认以可读的方式垂直堆叠它们。

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">just now</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </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 mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small class="text-muted">2 seconds ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Heads up, toasts will stack automatically
  </div>
</div>

放置

根据需要使用自定义 CSS 放置 Toast。右上角通常用于通知，顶部中间也是如此。如果您一次只显示一个 Toast，请将定位样式直接放在.toast上。

- Bootstrap 框架 Bootstrap 11 分钟前
你好，世界！这是一条 Toast 消息。 
<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <div class="toast" style="position: absolute; top: 0; right: 0;">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

对于生成更多通知的系统，请考虑使用包装元素，以便它们可以轻松堆叠。

<div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  <!-- Position it -->
  <div style="position: absolute; top: 0; right: 0;">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">just now</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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 mr-2" alt="...">
        <strong class="mr-auto">Bootstrap</strong>
        <small class="text-muted">2 seconds ago</small>
        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </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" style="height: 200px;">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded mr-2" alt="...">
      <strong class="mr-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

辅助功能

Toasts 旨在对您的访问者或用户进行小的中断，因此，为了帮助那些使用屏幕阅读器和类似辅助技术的访问者或用户，您应该将 Toast 包裹在aria-live区域中。屏幕阅读器会自动播报实时区域的更改（例如注入/更新 Toast 组件），而无需移动用户的焦点或以其他方式中断用户。此外，包括aria-atomic="true"以确保始终将整个 Toast 作为一个单独的（原子）单元播报，而不仅仅是播报更改的内容（如果您只更新 Toast 内容的一部分，或者在以后的时间点显示相同的 Toast 内容，这可能会导致问题）。如果所需的信息对于流程很重要，例如表单中的错误列表，则使用警报组件而不是 Toast。

请注意，在生成或更新提示之前，实时区域需要出现在标记中。如果您同时动态生成两者并将它们注入到页面中，辅助技术通常不会对其进行播报。

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

当您显示的内容发生变化时，请务必更新 delay 超时，以便用户有足够的时间阅读提示。

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-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-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded mr-2" alt="...">
    <strong class="mr-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

虽然从技术上讲，可以在提示中添加可聚焦/可操作的控件（例如其他按钮或链接），但您应该避免对自动隐藏提示执行此操作。即使您给提示一个较长的 delay 超时，键盘和辅助技术用户也可能难以及时到达提示以采取措施（因为提示在显示时不会接收焦点）。如果您绝对必须有更多控件，我们建议使用 autohide: false 的提示。

JavaScript 行为

用法

通过 JavaScript 初始化提示

$('.toast').toast(option)

选项

可以通过数据属性或 JavaScript 传递选项。对于数据属性，将选项名称附加到 data-，如 data-animation=""。

名称 类型 默认值 说明
animation 布尔值 true 对提示应用 CSS 渐显过渡
autohide 布尔值 true 自动隐藏提示
delay 数字 500 隐藏提示的延迟（毫秒）

方法

异步方法和过渡

所有 API 方法都是 异步的，并启动一个 过渡。它们在过渡启动后立即返回给调用方，但 在过渡结束之前。此外，对 过渡组件 的方法调用将被 忽略。

请参阅我们的 JavaScript 文档了解更多信息.

$().toast(options)

将提示处理程序附加到元素集合。

.toast('show')

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

$('#element').toast('show')

.toast('hide')

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

$('#element').toast('hide')

.toast('dispose')

隐藏元素的提示。提示将保留在 DOM 中，但不再显示。

$('#element').toast('dispose')

事件

事件类型 说明
show.bs.toast 当调用 show 实例方法时，此事件立即触发。
shown.bs.toast 当提示对用户可见时，触发此事件。
hide.bs.toast 当调用 hide 实例方法时，此事件立即触发。
hidden.bs.toast 当提示完成对用户隐藏时，触发此事件。 
$('#myToast').on('hidden.bs.toast', function () {
  // do something...
})