弹出提示框

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

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

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=""。

显示

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

toast.show()

隐藏

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

toast.hide()

处置

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

toast.dispose()

事件

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