Bootstrap5 Toast

Toast 是一种轻量级的通知或消息组件。它可以用来显示短暂的信息，比如提示用户操作成功或失败，或者显示一些临时性的信息。Bootstrap 5 提供了非常方便的 API 来创建和控制 toast。

引入 Bootstrap

在使用 toast 之前，你需要确保已经引入了 Bootstrap 的 CSS 和 JS 文件。你可以通过 CDN 链接来引入：

<!-- 引入 Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- 引入 Popper.js -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>

<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

创建一个基本的 Toast

一个基本的 toast 可以通过以下 HTML 结构来创建：

// www.javascriptcn.com code example
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <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>

设置 Toast 位置

默认情况下，toast 会出现在右上角。如果你想改变它的位置，可以通过添加 .position-absolute 类，并结合 top 和 end 或者 bottom 和 start 类来实现：

<div class="position-absolute top-0 start-50 translate-middle-x p-3" style="z-index: 1200;">
  <!-- Toast HTML 结构 -->
</div>

显示和隐藏 Toast

Toast 默认是隐藏的，你需要通过 JavaScript 来显示它。你可以通过以下方式来触发：

// www.javascriptcn.com code example
<button type="button" class="btn btn-primary" id="showToast">Show Toast</button>

<script>
  const toastElList = [].slice.call(document.querySelectorAll('.toast'))
  const toastList = toastElList.map(function (toastEl) {
    return new bootstrap.Toast(toastEl)
  })
  
  document.getElementById('showToast').addEventListener('click', function () {
    toastList.forEach(toast => toast.show())
  })
</script>

自定义 Toast 内容和样式

Toast 的内容和样式都可以通过自定义类名来调整。例如，你可以自定义 toast 的背景颜色、文本颜色、边距等：

// www.javascriptcn.com code example
<div class="toast bg-dark text-white p-4" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">自定义 Toast</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    这是一个自定义样式的 Toast。
  </div>
</div>

动画效果

Bootstrap 5 的 toast 组件支持动画效果，默认情况下会有淡入淡出的效果。你也可以通过添加或移除特定的 CSS 类来控制动画效果。

控制动画

如果你想要禁用动画效果，可以给 toast 添加 .no-animation 类：

// www.javascriptcn.com code example
<div class="toast no-animation" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">禁用动画的 Toast</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    禁用了动画效果的 Toast。
  </div>
</div>

自定义动画

你还可以通过 CSS 自定义动画效果。例如，你可以创建一个新的 CSS 类来应用自定义动画：

// www.javascriptcn.com code example
@keyframes customFadeIn {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes customFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-20px); }
}

.custom-toast {
  animation: customFadeIn 0.5s ease-in-out;
}

.custom-toast.hide {
  animation: customFadeOut 0.5s ease-in-out;
}

然后在 toast 中使用这个类：

// www.javascriptcn.com code example
<div class="toast custom-toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">自定义动画的 Toast</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    这是一个带有自定义动画效果的 Toast。
  </div>
</div>

动态显示和隐藏

你可以通过 JavaScript 动态地显示和隐藏 toast。例如，你可以根据用户的操作动态地显示 toast：

// www.javascriptcn.com code example
<button type="button" class="btn btn-primary" id="showCustomToast">显示自定义 Toast</button>

<script>
  const customToast = new bootstrap.Toast(document.querySelector('.custom-toast'))

  document.getElementById('showCustomToast').addEventListener('click', function () {
    customToast.show()
  })
</script>

使用 JavaScript API

Bootstrap 的 toast 组件提供了丰富的 JavaScript API 来控制 toast 的行为。例如，你可以通过 JavaScript 来控制 toast 的显示和隐藏，以及监听事件。

初始化 Toast

你可以通过 JavaScript 来初始化 toast，并设置其选项：

// www.javascriptcn.com code example
<button type="button" class="btn btn-primary" data-bs-toggle="toast" data-bs-target="#myToast">显示 Toast</button>

<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <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>

<script>
  const myToast = new bootstrap.Toast(document.getElementById('myToast'), {
    autohide: false,
    delay: 5000
  })

  document.querySelector('[data-bs-target="#myToast"]').addEventListener('click', function () {
    myToast.show()
  })
</script>

监听事件

Bootstrap 的 toast 组件还提供了多种事件，你可以在 toast 的不同阶段绑定相应的事件处理函数。例如，你可以监听 toast 显示和隐藏的事件：

// www.javascriptcn.com code example
<div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Bootstrap</strong>
    <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>

<script>
  const myToast = new bootstrap.Toast(document.getElementById('myToast'))

  myToast.on('show.bs.toast', function () {
    console.log('Toast 正在显示')
  })

  myToast.on('shown.bs.toast', function () {
    console.log('Toast 已经显示')
  })

  myToast.on('hide.bs.toast', function () {
    console.log('Toast 正在隐藏')
  })

  myToast.on('hidden.bs.toast', function () {
    console.log('Toast 已经隐藏')
  })

  document.querySelector('[data-bs-target="#myToast"]').addEventListener('click', function () {
    myToast.show()
  })
</script>

以上就是关于 Bootstrap 5 Toast 的详细教程，希望对你的前端开发有所帮助！