Bootstrap 4 Toast

Bootstrap 4 Toast是Bootstrap 4框架的一个插件，用于在网页中显示弹出式通知。

特性

• 支持多种颜色和图标的通知
• 支持自定义内容和样式的通知
• 支持自动关闭和手动关闭的通知
• 支持在顶部、右上角、右下角、左下角和左上角等位置显示通知
• 支持堆叠多个通知，以避免遮挡问题

快速开始

1. 在HTML文件中引入Toast的CSS和JS文件：

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

<!-- Toast CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js">

<!-- Toast JS -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>

2. 在HTML文件中添加Toast的HTML代码：

<div class="position-fixed bottom-0 end-0 p-3" style="z-index: 11">
  <div id="liveToast" 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">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

3. 在JavaScript文件中初始化Toast：

var toastEl = document.getElementById('liveToast')
var toast = new bootstrap.Toast(toastEl)

toast.show()

自定义内容和样式

可以通过修改Toast的HTML代码和CSS样式，来自定义Toast的内容和样式。

<div id="customToast" class="toast" role="alert" data-bs-autohide="false" data-bs-animation="true">
  <div class="toast-header bg-warning text-white">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Custom Toast</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">
    This is a custom toast message.
  </div>
</div>

通过设置data-bs-autohide="false"和data-bs-animation="true"，可以禁用自动隐藏和开启动画。

#customToast {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 300px;
  max-width: 100%;
  z-index: 9999;
}

#customToast .toast-header {
  background-color: #ffc107;
  color: #fff;
  border-bottom: none;
}

#customToast .toast-body {
  background-color: #fff3cd;
  color: #856404;
}

通过自定义CSS样式，可以改变Toast的颜色、字体、背景等样式。

效果预览

请访问以下链接查看效果预览：Bootstrap 4 Toast Demo

参考链接

• Bootstrap 4 Toast Documentation
• Bootstrap 4 Toast Codepen Demo