Bootstrap Toast 轻提示

学习Bootstrap Toast组件的使用和JavaScript控制 · 难度：入门 · +15XP

Toast 轻提示

Toast是轻量级的通知组件，类似移动端的推送通知。

基本结构

<div class="toast" role="alert">
  <div class="toast-header">
    <strong class="me-auto">通知标题</strong>
    <small>刚刚</small>
    <button class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    这是通知的内容。
  </div>
</div>

JavaScript控制

const toast = new bootstrap.Toast(element, {
    animation: true,
    autohide: true,
    delay: 3000  // 3秒后自动隐藏
});
toast.show();  // 显示
toast.hide();  // 隐藏

位置控制

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <!-- Toast固定在右下角 -->
</div>

💡 练习

创建可点击按钮触发显示Toast通知的功能，3秒后自动隐藏。