在 Bootstrap 5 中，消息弹窗（Toasts） 是一种轻量级的通知组件，用于显示非侵入式的临时消息。它通常用于提示用户某些操作的结果，比如操作成功、失败或者一般的系统消息。Toast 通常会在页面的某个位置显示一段时间，然后自动消失。

1. 基本消息弹窗（Toast）

要创建一个简单的消息弹窗，使用 toast 类和一些必要的配置来定义。

示例：基本的消息弹窗

<!-- Toast -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast Title</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is a simple toast message.
  </div>
</div>
  • .toast：定义消息弹窗的基础样式。
  • .toast-header：定义消息弹窗头部的样式。
  • .toast-body：定义消息弹窗主体内容。

2. 自动显示和关闭消息弹窗

消息弹窗默认情况下不会自动显示。你需要通过 JavaScript 来显示和隐藏它。

示例：通过 JavaScript 显示消息弹窗

<!-- Toast -->
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast Title</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is a simple toast message.
  </div>
</div>

<!-- JavaScript -->
<script>
  var toast = new bootstrap.Toast(document.getElementById('myToast'));
  toast.show();  // 显示消息弹窗
</script>
  • new bootstrap.Toast(element)：通过 JavaScript 初始化消息弹窗。
  • .show()：显示消息弹窗。

3. 设置消息弹窗的自动隐藏

Bootstrap 提供了 data-bs-delay 属性来控制消息弹窗的显示时间。它以毫秒为单位指定自动关闭的延迟时间。

示例：设置自动关闭的延迟时间

<!-- Toast -->
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
  <div class="toast-header">
    <strong class="me-auto">Toast Title</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This toast will automatically hide after 3 seconds.
  </div>
</div>

<!-- JavaScript -->
<script>
  var toast = new bootstrap.Toast(document.getElementById('myToast'));
  toast.show();  // 显示消息弹窗
</script>
  • data-bs-delay="3000"：设置自动隐藏的时间为 3000 毫秒（3秒）。

4. 显示多个消息弹窗

你可以在页面上显示多个消息弹窗，它们会根据顺序显示。

示例：多个消息弹窗

<!-- Toast 1 -->
<div class="toast" id="toast1" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="2000">
  <div class="toast-header">
    <strong class="me-auto">Toast 1</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is the first toast message.
  </div>
</div>

<!-- Toast 2 -->
<div class="toast" id="toast2" role="alert" aria-live="assertive" aria-atomic="true" data-bs-delay="3000">
  <div class="toast-header">
    <strong class="me-auto">Toast 2</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is the second toast message.
  </div>
</div>

<!-- JavaScript -->
<script>
  var toast1 = new bootstrap.Toast(document.getElementById('toast1'));
  var toast2 = new bootstrap.Toast(document.getElementById('toast2'));

  toast1.show();  // 显示第一个消息弹窗
  setTimeout(() => toast2.show(), 2500);  // 2.5秒后显示第二个消息弹窗
</script>
  • 通过 setTimeout() 可以控制不同消息弹窗的显示顺序。

5. 自定义消息弹窗样式

你可以根据需要自定义消息弹窗的颜色和样式。常见的颜色包括 bg-success, bg-danger, bg-warning 等，用于改变消息弹窗的背景色。

示例：自定义消息弹窗的颜色

<!-- Success Toast -->
<div class="toast bg-success text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Success</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is a success message!
  </div>
</div>

<!-- Danger Toast -->
<div class="toast bg-danger text-white" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Error</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Something went wrong!
  </div>
</div>
  • bg-success text-white：设置背景为绿色，文字为白色（成功消息）。
  • bg-danger text-white：设置背景为红色，文字为白色（错误消息）。

6. 自定义消息弹窗位置

你可以使用 .position-absolute 和相关的类（如 top-0, start-0 等）来调整弹出位置。默认情况下，消息弹窗会出现在页面的右上角。

示例：将消息弹窗放置在页面底部

<!-- Toast -->
<div class="toast position-absolute bottom-0 end-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast Title</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This is a toast at the bottom of the page.
  </div>
</div>

<!-- JavaScript -->
<script>
  var toast = new bootstrap.Toast(document.querySelector('.toast'));
  toast.show();
</script>
  • position-absolute bottom-0 end-0：将消息弹窗放置在页面的右下角。

7. 消息弹窗的销毁

你可以通过 dispose() 方法销毁一个弹窗，使其不再响应事件。

示例：销毁消息弹窗

<!-- Toast -->
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Toast Title</strong>
    <small>Just now</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    This toast will be disposed.
  </div>
</div>

<!-- JavaScript -->
<script>
  var toast = new bootstrap.Toast(document.getElementById('myToast'));
  toast.show();  // 显示消息弹窗

  setTimeout(function () {
    toast.dispose();  // 3秒后销毁弹窗
  }, 3000);
</script>
  • .dispose()：销毁消息弹窗，使其不再显示。

总结

  • .toast：定义消息弹窗的基础样式。
  • data-bs-delay="1000"：设置自动关闭的延迟时间。
  • .show()：通过 JavaScript 显示消息弹窗。
  • .dispose()：销毁消息弹窗。
  • 自定义颜色和位置：通过 bg-[color] 和 position 类调整消息弹窗样式。

使用这些功能，你可以创建丰富的消息弹窗来为用户提供反馈和通知。