弹出提示框(Toast)

.toast弹出提示框控件用于向访客推送通知，是个轻量级、易于订制的警告消息组件。

.toast是一种轻量级通知，旨在模仿移动和桌面操作系统普及的推送通知。它们是用弹性盒子构建的，所以很容易对齐和定位,这是在V4.2.1版本添加新特性。

综述

使用toast插件时需知:

• 如果你从源代码构建JavaScript, 需要requires util.js.
• Toasts出于性能原因选择加入,因此 你必须自己初始化它们.
• Toasts如果没有指定，将会自动隐藏 autohide: false.

示例

基础

为了鼓励可扩展和可预测的Toast，我们建议使用标题和正文类型的。Toast标题使用 display: flex, 随着我们的边距和弹性盒子设置使内容容易对齐。

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>

透明

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

<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">
     您好! 这是一个Toasts弹出提示框.
  </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">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">
   看到了吗?就像这样。
  </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.

<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">
   看到了吗?就像这样。
      </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">
   注意，提示弹出框会自动堆积。
      </div>
    </div>
  </div>
</div>

你也可以用弹性布局定义提示框水平居中或者垂直居中。

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

无障碍

Toasts旨在对您的访问者或用户造成小的干扰，因此为了帮助那些拥有屏幕阅读器和类似辅助技术的人，你应该将你的提示框包裹在aria-live region。屏幕阅读器会自动宣布对活动区域的更改（例如注入/更新Toast组件），而无需移动用户的焦点或以其他方式中断用户。此外, 包括 aria-atomic="true" 确保整个提示框始终作为单个(原子)单元进行声明，而不是宣布更改了什么(如果只更新提示框的部分内容，或者在稍后的某个时间点显示相同的提示框内容，可能会导致问题)。如果需要的信息对流程很重要，例如表单中的错误列表，然后使用 alert组件代替提示框。

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

你也需要适应 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-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>

JavaScript 行为

用法

通过JavaScript初始化提示框:

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

选项

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

方法

异步方法和转换

所有API方法都是异步的 并且开始转换. 一旦转换开始，但 结束之前。总之，转换组件的方法调用将被忽略。

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

$().toast(options)

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

.toast('show')

揭示元素的提示框。 在实际显示提示框之前返回调用者 (i.e. 之前 shown.bs.toast事件发生).你必须手动调用此方法，代替你的提示框不会显示。

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

.toast('hide')

隐藏元素的提示框。 在实际隐藏toast之前返回调用者 (i.e. 之前 hidden.bs.toast 事件发生). 如果你做了，你必须手动调用此方法 autohide为false.

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

.toast('dispose')

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

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

事件

$('#myToast').on('hidden.bs.toast', function () {
  // do something…
})