弹出提示框(Toast)

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

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

综述

使用toast插件时需知:

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

示例

基础

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

Toasts可按需要引用、定义、设置，所需的标记非常少—只需要一个单独的元素来包含你的提示内容，并强烈建议使用一个强制按钮。

弹出提示框(Toasts) - 图1

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

透明

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

弹出提示框(Toasts) - 图2

  1. <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  2.   <div class="toast-header">
  3.     <img src="..." class="rounded mr-2" alt="...">
  4.     <strong class="mr-auto">Bootstrap</strong>
  5.     <small class="text-muted">11 mins ago</small>
  6.     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  7.       <span aria-hidden="true">&times;</span>
  8.     </button>
  9.   </div>
  10.   <div class="toast-body">
  11.      您好! 这是一个Toasts弹出提示框.
  12.   </div>
  13. </div>

堆叠

当我们有多个提示框时, 我们默认以一种可读的方式从上往下堆叠它们。

弹出提示框(Toasts) - 图3

  1. <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  2.   <div class="toast-header">
  3.     <img src="..." class="rounded mr-2" alt="...">
  4.     <strong class="mr-auto">Bootstrap</strong>
  5.     <small class="text-muted">just now</small>
  6.     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  7.       <span aria-hidden="true">&times;</span>
  8.     </button>
  9.   </div>
  10.   <div class="toast-body">
  11.    看到了吗?就像这样。
  12.   </div>
  13. </div>
  15. <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  16.   <div class="toast-header">
  17.     <img src="..." class="rounded mr-2" alt="...">
  18.     <strong class="mr-auto">Bootstrap</strong>
  19.     <small class="text-muted">2 seconds ago</small>
  20.     <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  21.       <span aria-hidden="true">&times;</span>
  22.     </button>
  23.   </div>
  24.   <div class="toast-body">
  25.     Heads up, toasts will stack automatically
  26.   </div>
  27. </div>

位置

当你需要提示框是可以用传统的CSS放置它们。右上角通常用于通知,如下图。如果你一次只展示一个提示框，请将定位样式正确地放在你想要的位置用.toast.

弹出提示框(Toasts) - 图4

  1. <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  2.   <div class="toast" style="position: absolute; top: 0; right: 0;">
  3.     <div class="toast-header">
  4.       <img src="..." class="rounded mr-2" alt="...">
  5.       <strong class="mr-auto">Bootstrap</strong>
  6.       <small>11 mins ago</small>
  7.       <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  8.         <span aria-hidden="true">&times;</span>
  9.       </button>
  10.     </div>
  11.     <div class="toast-body">
  12.       Hello, world! This is a toast message.
  13.     </div>
  14.   </div>
  15. </div>

对于生成更多通知的系统，可以考虑使用包装元素，这样它们可以轻松地进行堆栈。

弹出提示框(Toasts) - 图5

  1. <div aria-live="polite" aria-atomic="true" style="position: relative; min-height: 200px;">
  2.   <!-- Position it -->
  3.   <div style="position: absolute; top: 0; right: 0;">
  5.     <!-- Then put toasts within -->
  6.     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  7.       <div class="toast-header">
  8.         <img src="..." class="rounded mr-2" alt="...">
  9.         <strong class="mr-auto">Bootstrap</strong>
  10.         <small class="text-muted">just now</small>
  11.         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  12.           <span aria-hidden="true">&times;</span>
  13.         </button>
  14.       </div>
  15.       <div class="toast-body">
  16.    看到了吗?就像这样。
  17.       </div>
  18.     </div>
  20.     <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  21.       <div class="toast-header">
  22.         <img src="..." class="rounded mr-2" alt="...">
  23.         <strong class="mr-auto">Bootstrap</strong>
  24.         <small class="text-muted">2 seconds ago</small>
  25.         <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  26.           <span aria-hidden="true">&times;</span>
  27.         </button>
  28.       </div>
  29.       <div class="toast-body">
  30.    注意，提示弹出框会自动堆积。
  31.       </div>
  32.     </div>
  33.   </div>
  34. </div>

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

弹出提示框(Toasts) - 图6

  1. <!-- Flexbox container for aligning the toasts -->
  2. <div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
  4.   <!-- Then put toasts within -->
  5.   <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  6.     <div class="toast-header">
  7.       <img src="..." class="rounded mr-2" alt="...">
  8.       <strong class="mr-auto">Bootstrap</strong>
  9.       <small>11 mins ago</small>
  10.       <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
  11.         <span aria-hidden="true">&times;</span>
  12.       </button>
  13.     </div>
  14.     <div class="toast-body">
  15.       Hello, world! This is a toast message.
  16.     </div>
  17.   </div>
  18. </div>

无障碍

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

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

你也需要适应 role和aria-live 级别取决于内容。如果是一个重要的消息，比如一个错误，用 role="alert" aria-live="assertive", 也可以用role="status" aria-live="polite"属性。

当你显示的内容发生变化时，请确保更新延迟超时，以确保人们有足够的时间阅读提示框内容。

  1. <div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-delay="10000">
  2.   <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
  3. </div>

当使用autohide: false, 你必须加上一个关闭按钮允许用户关闭这个提示框。

弹出提示框(Toasts) - 图7

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

JavaScript 行为

用法

通过JavaScript初始化提示框:

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

选项

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

NameTypeDefaultDescription
animationbooleantrueApply a CSS fade transition to the toast
autohidebooleantrueAuto hide the toast
delaynumber500Delay hiding the toast (ms)

方法

异步方法和转换

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

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

$().toast(options)

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

.toast('show')

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

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

.toast('hide')

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

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

.toast('dispose')

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

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

事件

Event TypeDescription
show.bs.toastThis event fires immediately when the show instance method is called.
shown.bs.toastThis event is fired when the toast has been made visible to the user.
hide.bs.toastThis event is fired immediately when the hide instance method has been called.
hidden.bs.toastThis event is fired when the toast has finished being hidden from the user.
  1. $('#myToast').on('hidden.bs.toast', function () {
  2.   // do something…
  3. })