Bootstrap 5消息弹窗(Toasts)完全指南
小白也能看懂的Toast弹窗知识点汇总
提示： 点击下方按钮可以查看不同Toast效果演示
Toasts是什么？
Toast就像手机上弹出的通知，是一种轻量级、非阻塞的消息提示，出现在屏幕的某个角落，几秒钟后自动消失。
自动消失
Toast会在显示一段时间后自动消失，通常为3-5秒。
可手动关闭
用户也可以随时点击关闭按钮提前关闭Toast。
非阻塞式
Toast不会打断用户操作，用户可以继续使用页面。
📋 基本结构
一个Toast由以下几个部分组成：
- Toast容器(.toast) – 整个Toast的外框
- Toast头部(.toast-header) – 标题区域（可选）
- Toast主体(.toast-body) – 主要内容区域
- 关闭按钮(.btn-close) – 右上角的关闭按钮
<div class=”toast” role=”alert”>
<div class=”toast-header”>
<strong class=”me-auto”>标题</strong>
<small>时间</small>
<button type=”button” class=”btn-close” data-bs-dismiss=”toast”></button>
</div>
<div class=”toast-body”>这里是消息内容</div>
</div>
<div class=”toast-header”>
<strong class=”me-auto”>标题</strong>
<small>时间</small>
<button type=”button” class=”btn-close” data-bs-dismiss=”toast”></button>
</div>
<div class=”toast-body”>这里是消息内容</div>
</div>
🚀 使用示例
点击下方按钮查看不同Toast效果：
如何显示Toast？
显示Toast需要两个步骤：
- 创建Toast的HTML结构
- 通过JavaScript初始化并显示
// 1. 获取Toast元素
var myToast = document.getElementById(‘myToast’);
// 2. 创建Toast实例
var toast = new bootstrap.Toast(myToast);
// 3. 显示Toast
toast.show();
// 也可以直接在一行内完成
new bootstrap.Toast(document.getElementById(‘myToast’)).show();
var myToast = document.getElementById(‘myToast’);
// 2. 创建Toast实例
var toast = new bootstrap.Toast(myToast);
// 3. 显示Toast
toast.show();
// 也可以直接在一行内完成
new bootstrap.Toast(document.getElementById(‘myToast’)).show();
⚙️ 配置选项
创建Toast时可以传入配置对象：
| 选项 | 默认值 | 说明 |
|---|---|---|
animation |
true | 是否使用淡入淡出动画 |
autohide |
true | 是否自动隐藏 |
delay |
5000 | 自动隐藏的延迟时间（毫秒） |
// 配置示例
var toast = new bootstrap.Toast(myToast, {
animation: false,
autohide: false,
delay: 10000
});
toast.show();
var toast = new bootstrap.Toast(myToast, {
animation: false,
autohide: false,
delay: 10000
});
toast.show();
📍 位置控制
通过CSS可以控制Toast显示的位置：
固定位置容器
创建一个容器并固定在屏幕某个位置：
<!– 右上角 –>
<div class=”toast-container position-fixed top-0 end-0 p-3″>
<!– Toasts将在这里显示 –>
</div>
<div class=”toast-container position-fixed top-0 end-0 p-3″>
<!– Toasts将在这里显示 –>
</div>
位置示例
💡 进阶技巧
动态创建Toast
当需要动态创建Toast消息时：
function showDynamicToast(title, message) {
// 创建Toast元素
const toastEl = document.createElement(‘div’);
toastEl.className = ‘toast’;
toastEl.setAttribute(‘role’, ‘alert’);
toastEl.innerHTML = `
<div class=”toast-header”>
<strong class=”me-auto”>${title}</strong>
<button class=”btn-close” data-bs-dismiss=”toast”></button>
</div>
<div class=”toast-body”>${message}</div>`;
// 添加到容器
document.querySelector(‘.toast-container’).appendChild(toastEl);
// 初始化并显示
new bootstrap.Toast(toastEl).show();
}
// 创建Toast元素
const toastEl = document.createElement(‘div’);
toastEl.className = ‘toast’;
toastEl.setAttribute(‘role’, ‘alert’);
toastEl.innerHTML = `
<div class=”toast-header”>
<strong class=”me-auto”>${title}</strong>
<button class=”btn-close” data-bs-dismiss=”toast”></button>
</div>
<div class=”toast-body”>${message}</div>`;
// 添加到容器
document.querySelector(‘.toast-container’).appendChild(toastEl);
// 初始化并显示
new bootstrap.Toast(toastEl).show();
}
事件处理
Toast提供了几个事件方便控制：
show.bs.toast– 显示前触发shown.bs.toast– 显示后触发hide.bs.toast– 隐藏前触发hidden.bs.toast– 隐藏后触发
myToast.addEventListener(‘hidden.bs.toast’, function () {
// Toast完全隐藏后执行
console.log(‘Toast已经关闭’);
this.remove(); // 从DOM中移除
});
// Toast完全隐藏后执行
console.log(‘Toast已经关闭’);
this.remove(); // 从DOM中移除
});
🚫 常见问题与注意事项
注意： 这些是新手常遇到的问题
可能的原因：
- 没有引入Bootstrap的JavaScript文件
- 没有正确初始化Toast实例
- 忘记调用
.show()方法 - Toast被其他元素遮挡（检查z-index）
可以使用自定义CSS覆盖默认样式：
/* 自定义Toast样式 */
.toast.custom-toast {
background-color: #d4edda;
border-color: #c3e6cb;
}
.toast.custom-toast .toast-header {
background-color: #c3e6cb;
color: #155724;
}
.toast.custom-toast {
background-color: #d4edda;
border-color: #c3e6cb;
}
.toast.custom-toast .toast-header {
background-color: #c3e6cb;
color: #155724;
}
在容器中放入多个Toast元素即可，Bootstrap会自动处理位置：
<div class=”toast-container”>
<div class=”toast”>…</div>
<div class=”toast”>…</div>
<div class=”toast”>…</div>
</div>
<div class=”toast”>…</div>
<div class=”toast”>…</div>
<div class=”toast”>…</div>
</div>