垦荒学园 - 以垦荒之心，赴成长之约

切换主题

Bootstrap 信息提示框 ​

概述 ​

Bootstrap 信息提示框（Alerts）用于向用户提供上下文反馈消息。它们支持任意长度的文本，以及可选的关闭按钮。

基本信息提示框 ​

使用 .alert 类和上下文类创建基本的信息提示框：

html
<div class="alert alert-primary" role="alert">
    这是一个 primary 信息提示框 — 查看一下！
</div>
<div class="alert alert-secondary" role="alert">
    这是一个 secondary 信息提示框 — 查看一下！
</div>
<div class="alert alert-success" role="alert">
    这是一个 success 信息提示框 — 查看一下！
</div>
<div class="alert alert-danger" role="alert">
    这是一个 danger 信息提示框 — 查看一下！
</div>
<div class="alert alert-warning" role="alert">
    这是一个 warning 信息提示框 — 查看一下！
</div>
<div class="alert alert-info" role="alert">
    这是一个 info 信息提示框 — 查看一下！
</div>
<div class="alert alert-light" role="alert">
    这是一个 light 信息提示框 — 查看一下！
</div>
<div class="alert alert-dark" role="alert">
    这是一个 dark 信息提示框 — 查看一下！
</div>

带链接的信息提示框 ​

使用 .alert-link 类为信息提示框中的链接提供匹配的颜色：

html
<div class="alert alert-primary" role="alert">
    这是一个 primary 信息提示框，包含 <a href="#" class="alert-link">一个示例链接</a>。点击查看效果。
</div>
<div class="alert alert-success" role="alert">
    这是一个 success 信息提示框，包含 <a href="#" class="alert-link">一个示例链接</a>。点击查看效果。
</div>
<div class="alert alert-danger" role="alert">
    这是一个 danger 信息提示框，包含 <a href="#" class="alert-link">一个示例链接</a>。点击查看效果。
</div>

附加内容 ​

信息提示框还可以包含其他 HTML 元素，如标题、段落和分隔符：

html
<div class="alert alert-success" role="alert">
    <h4 class="alert-heading">干得好！</h4>
    <p>恭喜，你成功地阅读了这个重要的信息提示框消息。这个示例文本将会运行更长一点，以便你能够看到信息提示框内的间距是如何与这种内容一起工作的。</p>
    <hr>
    <p class="mb-0">当你需要的时候，一定要使用边距工具来保持整洁。</p>
</div>

可关闭的信息提示框 ​

使用信息提示框 JavaScript 插件，可以关闭任何内联的信息提示框：

html
<div class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong>注意！</strong> 你应该检查下面的一些字段。
    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

带图标的信息提示框 ​

使用 Bootstrap Icons ​

html
<div class="alert alert-primary d-flex align-items-center" role="alert">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Info:">
        <use xlink:href="#info-fill"/>
    </svg>
    <div>
        这是一个带图标的 primary 信息提示框。
    </div>
</div>

<div class="alert alert-success d-flex align-items-center" role="alert">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Success:">
        <use xlink:href="#check-circle-fill"/>
    </svg>
    <div>
        这是一个带图标的 success 信息提示框。
    </div>
</div>

<div class="alert alert-danger d-flex align-items-center" role="alert">
    <svg class="bi flex-shrink-0 me-2" width="24" height="24" role="img" aria-label="Danger:">
        <use xlink:href="#exclamation-triangle-fill"/>
    </svg>
    <div>
        这是一个带图标的 danger 信息提示框。
    </div>
</div>

使用内联 SVG ​

html
<div class="alert alert-success d-flex align-items-center" role="alert">
    <svg width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.061L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
    </svg>
    <div>
        操作成功完成！
    </div>
</div>

<div class="alert alert-warning d-flex align-items-center" role="alert">
    <svg width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
        <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
    </svg>
    <div>
        请注意这个重要警告！
    </div>
</div>

实际示例 ​

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>
        
        <!-- 基本信息提示框 -->
        <h2>基本信息提示框</h2>
        <div class="alert alert-primary" role="alert">
            <strong>信息：</strong> 这是一个基本的信息提示框。
        </div>
        <div class="alert alert-success" role="alert">
            <strong>成功：</strong> 操作已成功完成！
        </div>
        <div class="alert alert-warning" role="alert">
            <strong>警告：</strong> 请注意这个重要提醒。
        </div>
        <div class="alert alert-danger" role="alert">
            <strong>错误：</strong> 发生了一个错误，请重试。
        </div>
        
        <!-- 带链接的信息提示框 -->
        <h2 class="mt-5">带链接的信息提示框</h2>
        <div class="alert alert-info" role="alert">
            需要帮助？请查看我们的 <a href="#" class="alert-link">帮助文档</a> 或 <a href="#" class="alert-link">联系支持</a>。
        </div>
        
        <!-- 复杂内容的信息提示框 -->
        <h2 class="mt-5">复杂内容的信息提示框</h2>
        <div class="alert alert-success" role="alert">
            <h4 class="alert-heading">账户创建成功！</h4>
            <p>欢迎加入我们的平台！你的账户已经成功创建并激活。现在你可以：</p>
            <ul class="mb-3">
                <li>完善个人资料</li>
                <li>浏览产品目录</li>
                <li>开始使用我们的服务</li>
            </ul>
            <hr>
            <p class="mb-0">如果你有任何问题，请随时联系我们的客服团队。</p>
        </div>
        
        <!-- 可关闭的信息提示框 -->
        <h2 class="mt-5">可关闭的信息提示框</h2>
        <div class="alert alert-warning alert-dismissible fade show" role="alert">
            <strong>系统维护通知：</strong> 我们将在今晚 23:00-01:00 进行系统维护，期间服务可能暂时不可用。
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <div class="alert alert-info alert-dismissible fade show" role="alert">
            <strong>新功能上线：</strong> 我们刚刚发布了新的功能，快来体验吧！
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <!-- 带图标的信息提示框 -->
        <h2 class="mt-5">带图标的信息提示框</h2>
        <div class="alert alert-success d-flex align-items-center" role="alert">
            <svg width="24" height="24" fill="currentColor" class="bi bi-check-circle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
                <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.061L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
            </svg>
            <div>
                <strong>文件上传成功！</strong> 你的文件已经成功上传到服务器。
            </div>
        </div>
        
        <div class="alert alert-danger d-flex align-items-center" role="alert">
            <svg width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
                <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
            </svg>
            <div>
                <strong>验证失败！</strong> 请检查你的输入信息是否正确。
            </div>
        </div>
        
        <div class="alert alert-warning d-flex align-items-center alert-dismissible fade show" role="alert">
            <svg width="24" height="24" fill="currentColor" class="bi bi-info-circle-fill flex-shrink-0 me-2" viewBox="0 0 16 16">
                <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
            </svg>
            <div>
                <strong>提示：</strong> 记得定期保存你的工作进度。
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
        
        <!-- 实际应用场景 -->
        <h2 class="mt-5">实际应用场景</h2>
        
        <!-- 表单验证提示 -->
        <h4>表单验证提示</h4>
        <form>
            <div class="mb-3">
                <label for="email" class="form-label">邮箱地址</label>
                <input type="email" class="form-control is-invalid" id="email" value="invalid-email">
                <div class="alert alert-danger mt-2 py-2" role="alert">
                    <small>请输入有效的邮箱地址。</small>
                </div>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control is-valid" id="password">
                <div class="alert alert-success mt-2 py-2" role="alert">
                    <small>密码强度良好。</small>
                </div>
            </div>
        </form>
        
        <!-- 状态通知 -->
        <h4 class="mt-4">状态通知</h4>
        <div class="row">
            <div class="col-md-6 mb-3">
                <div class="alert alert-primary" role="alert">
                    <div class="d-flex align-items-center">
                        <div class="spinner-border spinner-border-sm me-2" role="status">
                            <span class="visually-hidden">Loading...</span>
                        </div>
                        <div>正在处理你的请求...</div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 mb-3">
                <div class="alert alert-info" role="alert">
                    <strong>队列中：</strong> 你的任务排在第 3 位
                </div>
            </div>
        </div>
        
        <!-- 系统消息 -->
        <h4 class="mt-4">系统消息</h4>
        <div class="alert alert-light border" role="alert">
            <div class="d-flex">
                <div class="flex-shrink-0">
                    <img src="data:image/svg+xml,%3csvg width='32' height='32' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='32' height='32' fill='%23007bff'/%3e%3ctext x='50%25' y='50%25' font-size='16' fill='white' text-anchor='middle' dy='.3em'%3eA%3c/text%3e%3c/svg%3e" alt="管理员" class="rounded-circle">
                </div>
                <div class="flex-grow-1 ms-3">
                    <h6 class="mb-1">系统管理员</h6>
                    <p class="mb-1">系统将在 5 分钟后重启以应用更新。请保存你的工作。</p>
                    <small class="text-muted">2 分钟前</small>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

JavaScript 行为 ​

手动关闭 ​

javascript
// 手动关闭信息提示框
var alertElement = document.getElementById('myAlert');
var alert = new bootstrap.Alert(alertElement);
alert.close();

事件监听 ​

javascript
// 监听信息提示框关闭事件
var alertElement = document.getElementById('myAlert');
alertElement.addEventListener('closed.bs.alert', function () {
    console.log('信息提示框已关闭');
});

自定义样式 ​

自定义颜色 ​

css
.alert-custom {
    color: #721c24;
    background-color: #f8d7da;
    border-color: #f5c6cb;
}

.alert-custom .alert-link {
    color: #491217;
}

圆角样式 ​

html
<div class="alert alert-info rounded-pill px-4" role="alert">
    这是一个圆角的信息提示框
</div>

最佳实践 ​

  1. 使用合适的类型：根据消息的性质选择合适的信息提示框类型
  2. 保持简洁：信息应该简洁明了，易于理解
  3. 提供行动指导：告诉用户下一步应该做什么
  4. 考虑可访问性：使用 role="alert" 属性
  5. 适当使用关闭功能：对于临时消息使用可关闭的信息提示框

下一步 ​

现在你已经掌握了 Bootstrap 信息提示框的使用方法，接下来我们将学习按钮组组件。

下一章：Bootstrap 按钮组 →

本站内容仅供学习和研究使用。

Copyright 2025 垦荒教程 kenhuang.com All Rights Reserved. 备案号：粤ICP备17084064号-3 | 免责声明