Bootstrap V5.3 : Toasts 轻量提示中文翻译版

通过向访客推送通知，这是一种轻量级且易于自定义的警报消息。

Toast组件提供了一种非打断式的消息反馈方式，通常出现在屏幕角落，自动消失且不要求用户交互。适合用于显示不重要的成功消息或系统通知。

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

概述

使用 toast 插件时需要了解的事项：

出于性能原因，Toast 是选择加入的，因此您必须自己初始化它们。
如果未指定，Toasts 将自动隐藏。autohide: false

此组件的动画效果取决于媒体查询。请参阅我们的辅助功能文档的减少运动部分。prefers-reduced-motion

例子

基本

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

Toast 可以根据需要灵活，并且几乎不需要标记。我们至少需要一个元素来包含您的“烤”内容，并强烈建议使用关闭按钮。

世界您好！这是一条消息。

[HTML全文]

<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（使用，而不仅仅是）。现在这已经没有必要了。但是，为了向后兼容，我们的脚本将继续切换类（即使没有实际需要），直到下一个主要版本。.hidedisplay:noneopacity:0

实时示例

单击下面的按钮以显示默认隐藏的 toast（与我们的实用程序一起位于右下角）。

Hello, world! This is a toast message.

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

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <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>

我们使用以下 JavaScript 来触发实时 Toast 演示：

网站/src/assets/partials/snippets.js

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}

半透明

吐司略带半透明，以与下面的吐司融为一体。

世界您好！这是一条消息。

[HTML全文]

<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-body-secondary">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>

堆垛

您可以通过将吐司包裹在吐司容器中来堆叠吐司，这将在垂直方向上增加一些间距。

看？就这样。

注意，Toasts会自动堆叠

[HTML全文]

<div class="toast-container position-static">
  <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-body-secondary">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-body-secondary">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。在这里，我们通过删除默认，从 Bootstrap 图标添加自定义隐藏图标，并使用一些 flexbox 实用程序来调整布局，创建了一个更简单的 toast。.toast-header

世界您好！这是一条消息。

[HTML全文]

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

或者，还可以向 Toast 添加其他控件和组件。

世界您好！这是一条消息。

[HTML全文]

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

配色方案

基于上面的示例，您可以使用我们的颜色和背景实用程序创建不同的吐司配色方案。在这里，我们添加了，然后添加到我们的关闭按钮。为了获得清晰的边缘，我们使用删除默认边框。.text-bg-primary.toast.btn-close-white.border-0

世界您好！这是一条消息。

[HTML全文]

<div class="toast align-items-center text-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>

放置

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

世界您好！这是一条Toasts消息。

[HTML全文]

<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-body-secondary position-relative bd-example-toasts rounded-3">
  <div class="toast-container 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>

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

看？就这样。

注意，Toasts会自动堆叠

[HTML全文]

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `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 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-body-secondary">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-body-secondary">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。

世界您好！这是一条消息。

[HTML全文]

<!-- 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 组件）由屏幕阅读器自动宣布，而无需移动用户的焦点或以其他方式打断用户。此外，include 可确保整个 Toast 始终作为单个（原子）单元宣布，而不仅仅是宣布已更改的内容（如果仅更新 Toast 内容的一部分，或者在以后的时间点显示相同的 Toast 内容，则可能会导致问题）。如果所需的信息对流程很重要，例如，对于窗体中的错误列表，请使用警报组件而不是 Toast。aria-atomic="true"

请注意，在生成或更新 Toast 之前，标记中需要存在实时区域。如果同时动态生成两者并将它们注入页面，则辅助技术通常不会宣布它们。

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

当显示的内容发生更改时，请务必更新延迟超时，以便用户有足够的时间阅读 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>

使用时，必须添加关闭按钮以允许用户关闭 Toast。autohide: false

世界您好！这是一条消息。

[HTML全文]

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

虽然从技术上讲，可以在 Toast 中添加可聚焦/可作的控件（例如其他按钮或链接），但应避免在自动隐藏 Toast 时执行此作。即使给 Toast 提供较长的延迟超时，键盘和辅助技术用户也可能会发现很难及时到达 Toast 以采取作（因为 Toast 在显示时不会获得焦点）。如果您绝对需要进一步控制，我们建议使用吐司。autohide: false

CSS系统

变量

在 v5.2.0 中添加

作为 Bootstrap 不断发展的 CSS 变量方法的一部分，toast 现在使用本地 CSS 变量来增强实时自定义。CSS 变量的值是通过 Sass 设置的，因此仍然支持 Sass 自定义。.toast

scss/_toasts.scss

--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Sass 变量

scss/_variables.scss

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

用法

通过 JavaScript 初始化 Toast：

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

触发器

可以使用 toast 中按钮上的属性实现关闭，如下所示：data-bs-dismiss

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

或在 Toast 外部的按钮上使用附加按钮，如下所示：data-bs-target

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

选项

由于选项可以通过数据属性或 JavaScript 传递，因此您可以将选项名称附加到，如。通过数据属性传递选项时，请确保将选项名称的大小写类型从“camelCase”更改为“kebab-case”。例如，使用代替。data-bs-data-bs-animation="{value}"data-bs-custom-class="beautifier"data-bs-customClass="beautifier"

从 Bootstrap 5.2.0 开始，所有组件都支持实验性保留数据属性，该属性可以将简单的组件配置作为 JSON 字符串容纳。当元素具有和属性时，最终值将是，并且单独的数据属性将覆盖上给出的值。此外，现有数据属性能够容纳 JSON 值，例如 .data-bs-configdata-bs-config='{"delay":0, "title":123}'data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

最终配置对象是、的合并结果，其中最新给定的键值覆盖其他键值。data-bs-configdata-bs-js object

名字	类型	违约	描述
`animation`	布尔	`true`	将 CSS 淡入淡出过渡应用于 Toast。
`autohide`	布尔	`true`	延迟后自动隐藏 Toast。
`delay`	数	`5000`	隐藏 Toast 之前的延迟（以毫秒为单位）。

方法

所有 API 方法都是异步的，并启动转换。它们在转换开始后立即返回给调用方，但在转换结束之前。此外，对转换组件的方法调用将被忽略。在我们的 JavaScript 文档中了解更多信息。

方法	描述
`dispose`	隐藏元素的 toast。您的 Toast 将保留在 DOM 上，但不会再显示。
`getInstance`	静态方法，允许您获取与 DOM 元素关联的 toast 实例。例如：返回 Bootstrap Toast 实例。`const myToastEl = document.getElementById('myToastEl')const myToast = bootstrap.Toast.getInstance(myToastEl)`
`getOrCreateInstance`	静态方法，允许您获取与 DOM 元素关联的 toast 实例，或创建一个新实例，以防它未初始化。返回 Bootstrap Toast 实例。`const myToastEl = document.getElementById('myToastEl')const myToast = bootstrap.Toast.getOrCreateInstance(myToastEl)`
`hide`	隐藏元素的 toast。在 Toast 实际隐藏之前（即在事件发生之前）返回给调用方。如果您将 .`hidden.bs.toastautohidefalse`
`isShown`	根据 toast 的可见性状态返回布尔值。
`show`	显示元素的吐司。在 toast 实际显示之前（即事件发生之前）返回给调用方。您必须手动调用此方法，否则您的 Toast 将不会显示。`shown.bs.toast`

事件

事件	描述
`hide.bs.toast`	调用实例方法后，会立即触发此事件。`hide`
`hidden.bs.toast`	当 Toast 完成对用户隐藏时，将触发此事件。
`show.bs.toast`	调用实例方法时，此事件会立即触发。`show`
`shown.bs.toast`	当 Toast 对用户可见时，将触发此事件。

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

Bootstrap V5.3 中文手册

入门指南 Getting started

定制化 Customize

布局方式 Layout

内容样式 Content

表单控件 Forms

组件集合 Components

辅助工具 Helpers

工具类库 Utilities

功能扩展 Extend

关于Bootstrap

Toasts 轻量提示

概述

例子

基本

实时示例

半透明

堆垛

自定义内容

配色方案

放置

可及性

CSS系统

变量

Sass 变量

用法

触发器

选项

方法

事件