在GitHub上查看

弹出提示框

推送一个带有弹出提示框的通知来给你的访客,它是一个轻量级的,并且容易定制的警告信息。

弹出提示框是一种轻量级通知,旨在模仿在移动和桌面操作系统中流行的推送通知。它们是用flex制作的,所以很容易对齐和定位。

概述

当你在使用弹出提示框的时候你需要知道的东西:

  • 出于性能考虑,可以选择加入弹出提示框,因此你必须初始化它们。
  • 如果您没有指定 autohide: false, 弹出提示框将自动隐藏
此组件的动画效果依赖于 prefers-reduced-motion 媒体查询。请参阅我们的可访问文档的reduce motion部分。

示例

默认提示框

为了支持可扩展和可预测的弹出提示框,我们建议使用标题和正文。弹出提示框的标题使用 display: flex,由于我们的边距和flex实用工具,所以可以轻松对齐内容。

弹出开框非常的灵活,几乎没有必要的标记内容。最低限度,我们只要求一个元素包含你的“弹出框”的内容,并很大限度的支持取消按钮。

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

透明提示框

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

<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-muted">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 class="toast-container">
<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-muted">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-muted">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-header,并从Bootstrap 图标中添加了一个自定义隐藏图标, 并使用一些flex实用工具来调整布局,从而创建了一个更简单的toast。

<div class="toast d-flex align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>

另外,您还可以向弹出框中添加其他控件和组件。

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

配色方案

在上述示例的基础上,您可以使用我们的颜色工具创建不同的弹出框颜色方案。在这里,我们在 .toast 中 添加了 .bg-primary.text-white,然后在关闭按钮中添加了 .text-white 。对于清晰的边缘,我们使用 .border-0删除默认边框。

<div class="toast d-flex align-items-center text-white bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-body">
Hello, world! This is a toast message.
</div>
<button type="button" class="btn-close btn-close-white ms-auto me-2" data-bs-dismiss="toast" aria-label="Close"></button>
</div>

提示框的定位

根据需要使用自定义CSS放置弹出框。右上角经常用于通知,右上角中间也是如此。如果你每次只显示一个吐司,把定位样式直接放在 .toast 上。

Bootstrap 11 mins ago
Hello, world! This is a toast message.
<form>
<div class="form-group 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-dark position-relative bd-example-toasts">
<div class="toast-container position-absolute 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>

对于生成更多通知的系统,可以考虑使用包装元素,这样它们就可以容易地堆叠起来。

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

你还可以使用flex工具来水平或垂直地对齐弹出框。

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

扩展访问

弹出框对访问者或用户造成小的干扰,因此为了帮助那些使用屏幕阅读器和类似辅助技术的人,您应该将弹出框中包装在aria-live region区域中。对活动区域的更改(例如注入/更新toast组件)由屏幕阅读器自动阅读,而无需移动用户的焦点或以其他方式中断用户。 此外,还包括 aria-atomic="true" 以确保整个toast始终作为单个(原子)单元发布, 而不是阅读更改的内容(如果只更新toast的部分内容,或者在以后显示相同的弹出框内容,则可能会导致问题)。 如果所需信息对流程很重要,例如表单中的错误列表,则使用警报组件而不是弹出框。

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

您还需要根据内容调整 rolearia-live 级别。如果是一个重要的信息,如错误,使用 role="alert" aria-live="assertive",否则使用 role="status" aria-live="polite" 属性。

当显示的内容发生变化时,一定要更新延迟超时,以确保人们有足够的时间阅读弹出框的内容。

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

当使用 autohide: false 时,你必须添加一个关闭按钮来允许用户消除弹出框。

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

JavaScript 行为

用法

通过JavaScript初始化弹出框:

var toastElList = [].slice.call(document.querySelectorAll('.toast'))
var toastList = toastElList.map(function (toastEl) {
return new bootstrap.Toast(toastEl, option)
})

选项

选项可以通过数据属性或JavaScript传递。对于数据属性,将选项名追加到 data-bs-,如 data-bs-animation=""

名称 类型 默认 描述
animation boolean true 应用一个CSS渐变过渡到弹出框
autohide boolean true 自动隐藏弹出框
delay number 5000 延迟隐藏弹出框 (ms)

方法

异步方法和转换

所有API方法都是异步的,并开始转换。一旦过渡开始,它们就会在过渡结束之前返回到调用者。此外,对转换组件的方法调用将被忽略

更多信息,请参阅我们的JavaScript文档。

显示

显示一个元素的弹出框。返回到调用者之前,弹出框实际上已经显示(即在 shown.bs.toast 事件发生之前)。您必须手动调用此方法,否则您的弹出框将不会显示。

toast.show()

隐藏

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

toast.hide()

处置

隐藏元素的弹出框。你的弹出框将保留在DOM上,但不会再出现了。

toast.dispose()

事件

事件类型 描述
show.bs.toast show 实例方法被调用时,此事件立即触发。
shown.bs.toast 当弹出框对用户可见时触发此事件。
hide.bs.toast hide 实例方法被调用时,立即触发此事件。
hidden.bs.toast 当弹出框对用户隐藏完毕时,将触发此事件。
var myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', function () {
// do something...
})