Source

敬酒

通过 toast、轻量级且易于自定义的警报消息向您的访问者推送通知。

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

概述

使用 toast 插件时要知道的事情：

  • 如果您从源代码构建我们的 JavaScript，它需要util.js.
  • 出于性能原因，Toast 是可选的，因此您必须自己初始化它们。
  • 请注意，您负责放置敬酒。
  • 如果你不指定 Toasts 会自动隐藏autohide: false。

该组件的动画效果依赖于prefers-reduced-motion媒体查询。请参阅我们可访问性文档的减少运动部分。

例子

基本的

为了鼓励可扩展和可预测的 toast，我们建议使用 header 和 body。Toast headers 使用display: flex，由于我们的 margin 和 flexbox 实用程序，可以轻松对齐内容。

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

半透明

吐司也略带半透明，因此它们融合了它们可能出现的任何东西。对于支持backdrop-filterCSS 属性的浏览器，我们还将尝试模糊 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">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.

引导程序 11 分钟前
你好世界！这是一个祝酒词。 
<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="min-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>

可访问性

Toast 旨在对您的访问者或用户造成小的干扰，因此为了帮助那些使用屏幕阅读器和类似辅助技术的人，您应该将 Toast 包装在一个aria-live区域中。屏幕阅读器会自动宣布对活动区域的更改（例如注入/更新 toast 组件），而无需移动用户的焦点或以其他方式打断用户。此外，包括aria-atomic="true"以确保始终将整个 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-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-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>

JavaScript 行为

用法

通过 JavaScript 初始化 toast：

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

选项

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

姓名 类型 默认 描述
动画 布尔值 真的 对 toast 应用 CSS 淡入淡出过渡
自动隐藏 布尔值 真的 自动隐藏吐司
延迟 数字 500 延迟隐藏 toast (ms)

方法

异步方法和转换

所有 API 方法都是异步的并开始一个转换。他们在转换开始但在结束之前立即返回给调用者。此外，过渡组件上的方法调用将被忽略。

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

$().toast(options)

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

.toast('show')

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

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

.toast('hide')

隐藏元素的 toast。在 toast 实际被隐藏之前（即在事件发生之前）返回给调用者。hidden.bs.toast如果你做了，你必须手动调用这个autohide方法false。

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

.toast('dispose')

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

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

活动

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