如何将按钮连接到 Bootstrap 5 中的 Toast：HTML 与 JavaScript

2024-03-10 15:46:07

用 HTML 还是 JavaScript 将按钮连接到 Bootstrap 5 中的 Toast？

在当今数字化时代，用户体验 (UX) 是网站和应用程序的关键因素。Toast，一种短暂的通知消息，是增强 UX 的有效方式，而 Bootstrap 5 提供了开箱即用的 toast 支持。本文旨在阐明如何使用 HTML 或 JavaScript 将按钮连接到 Bootstrap 5 中的 toast。

仅使用 HTML 连接按钮和 Toast

Bootstrap 5 允许你仅使用 HTML 将按钮连接到 toast。通过 data-bs-target 属性，可以指定 toast 的 ID：

<button type="button" class="btn btn-primary" data-bs-target="#liveToast" data-bs-toggle="toast">
  显示 Toast
</button>

<div class="toast" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

使用 JavaScript 连接按钮和 Toast

除了使用 HTML，你还可以使用 Bootstrap Toast API 手动连接按钮和 toast。这提供了更多的灵活性，允许进行更高级别的自定义：

<button type="button" class="btn btn-primary" id="showLiveToastBtn">
  显示 Toast
</button>

<div class="toast" id="liveToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="ml-2 mb-1 close" data-bs-dismiss="toast">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

<script>
  const showLiveToastBtn = document.getElementById('showLiveToastBtn');
  const liveToast = document.getElementById('liveToast');

  showLiveToastBtn.addEventListener('click', () => {
    const toast = new bootstrap.Toast(liveToast);
    toast.show();
  });
</script>