垦荒学园

简体中文

English

简体中文

English

切换主题

Bootstrap 消息弹窗 ​

🎯 概述 ​

Bootstrap 消息弹窗（Toasts）是轻量级的通知组件，用于向用户显示简短的消息。常用于操作反馈、系统通知等场景。

📦 基本用法 ​

html
<div class="toast" role="alert">
    <div class="toast-header">
        <strong class="me-auto">Bootstrap</strong>
        <small>刚刚</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
        这是一条消息通知。
    </div>
</div>

<script>
const toast = new bootstrap.Toast(document.querySelector('.toast'));
toast.show();
</script>

🎨 消息弹窗样式 ​

html
<!-- 基本样式 -->
<div class="toast" role="alert">
    <div class="toast-body">
        简单的消息通知
        <button type="button" class="btn-close ms-2" data-bs-dismiss="toast"></button>
    </div>
</div>

<!-- 带颜色的消息 -->
<div class="toast align-items-center text-bg-primary" role="alert">
    <div class="d-flex">
        <div class="toast-body">
            主要消息
        </div>
        <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
</div>

📍 消息弹窗位置 ​

html
<div class="toast-container position-fixed top-0 end-0 p-3">
    <div class="toast" role="alert">
        <div class="toast-header">
            <strong class="me-auto">通知</strong>
            <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
        </div>
        <div class="toast-body">
            右上角消息
        </div>
    </div>
</div>

💻 JavaScript API ​

javascript
// 初始化
const toast = new bootstrap.Toast('#myToast', {
    animation: true,
    autohide: true,
    delay: 5000
});

// 显示
toast.show();

// 隐藏
toast.hide();

// 销毁
toast.dispose();

🌟 实际示例 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 消息弹窗示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-5">
        <h1>Bootstrap 消息弹窗示例</h1>
        
        <button type="button" class="btn btn-primary" id="showToast">显示消息</button>
        
        <div class="toast-container position-fixed top-0 end-0 p-3">
            <div id="myToast" 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>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const toast = new bootstrap.Toast('#myToast');
        document.getElementById('showToast').addEventListener('click', () => {
            toast.show();
        });
    </script>
</body>
</html>

下一步 ​

下一章：Bootstrap 滚动监听 →