对话框(Toasts)

通过对话框(Toasts),轻巧且易于自定义的提示消息向访客推送通知。

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

概览

使用对话框(Toasts)插件时要了解的事项:

  • 如果您是从源代码构建JavaScript,则它 requires util.js.
  • 出于性能原因,选择加入吐司,所以您必须自己初始化它们
  • 请注意,您负责摆放吐司。
  • 如果不指定autohide:false,对话框(Toasts)将自动隐藏。

The animation effect of this component is dependent on the prefers-reduced-motion media query. See the reduced motion section of our accessibility documentation.

例子

基础

为了鼓励可扩展的和可预见的对话框提示(Toasts),我们建议使用标题和正文。 Toast标题头部使用“ display:flex”,由于我们的margin和flexbox通用工具序使内容易于对齐。

Toast随您需要而灵活配置,所需标记很少。 至少,我们需要一个元素来包含您的“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>

半透明(Translucent)

Toasts也有点半透明,因此它们融合了所有可能出现的东西。 对于支持backdrop-filter CSS属性的浏览器,我们还将尝试在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>

Stacking

当您有多个 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">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>

放置(Placement)

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

Bootstrap 11 mins ago
Hello, world! This is a toast message.
<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通用工具来将toasts水平和/或垂直对齐。

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

辅助功能(Accessibility)

toast旨在对您的访问者或用户造成小小的干扰,因此,为了帮助那些使用屏幕阅读器和类似辅助技术的人,您应该将toast包装在 aria-live region。 屏幕阅读器会自动宣布对实时区域的更改(例如注入/更新吐司组件),而无需移动用户的焦点或以其他方式打扰用户。 另外,添加“ aria-atomic =“ true”`以确保整个toast始终以单个(原子)单位宣布,而不是宣布已更改的内容(如果仅更新吐司的部分内容,可能会导致问题。 ,或者在以后显示相同的toast内容)。 如果所需的信息对于该过程很重要,例如 要获取表单中的错误列表,请使用alert component 代替toast。

请注意,在生成或更新吐司之前,必须在标记中包含实时区域。 如果您同时动态生成两者并将它们注入页面,则辅助技术通常不会宣布它们。

您还需要根据内容调整“角色”和“现场直播”水平。 如果这是一条重要消息(例如错误),请使用role =“ alert” aria-live =“ assertive”,否则使用role =“ status” aria-live =“ polite”属性。

当您显示的内容发生变化时,请确保更新delay timeout 以确保人们有足够的时间阅读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)

选项(Options)

可以通过数据属性或JavaScript传递选项。 对于数据属性,将选项名称附加到data-中,如`data-animation =“”中所示。

Name Type Default Description
animation boolean true Apply a CSS fade transition to the toast
autohide boolean true Auto hide the toast
delay number 500 Delay hiding the toast (ms)

方法

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See our JavaScript documentation for more information.

$().toast(options)

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

.toast('show')

展现元素的toast。 在实际显示toast之前返回调用者(即在shown.bs.toast事件发生之前)。 您必须手动调用此方法,否则不会显示toast。

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

.toast('hide')

隐藏元素的toast。 在吐司实际被隐藏之前返回调用者(即在发生“ hidden.bs.toast”事件之前)。 如果您将autohide设置为false,则必须手动调用此方法。

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

.toast('dispose')

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

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

Events

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