Bootstrap 5 信息提示框
Bootstrap 5 提供了一套灵活的信息提示框组件，用于向用户显示反馈消息、通知和状态信息。
提示框的主要特点：
- 语义化颜色 - 使用主题颜色表示不同类型的信息
- 可关闭选项 - 允许用户手动关闭提示框
- 丰富的内容 - 支持标题、文本、链接和图标
- 响应式设计 - 自动适应不同屏幕尺寸
- JavaScript集成 - 支持动态显示和隐藏
提示框示例
这是一个主要提示框示例 - 用于重要的信息提示。
这是一个成功提示框示例 - 用于操作成功的反馈。
这是一个警告提示框示例 - 用于需要注意的情况。
基本提示框
使用 .alert 类和颜色变体类创建基本提示框。
这是一个主要提示框 - 检查它！
这是一个次要提示框 - 检查它！
这是一个成功提示框 - 检查它！
这是一个危险提示框 - 检查它！
这是一个警告提示框 - 检查它！
这是一个信息提示框 - 检查它！
这是一个浅色提示框 - 检查它！
这是一个深色提示框 - 检查它！
<!-- 主要提示框 -->
<div class="alert alert-primary" role="alert">
这是一个主要提示框 - 检查它！
</div>
<!-- 成功提示框 -->
<div class="alert alert-success" role="alert">
这是一个成功提示框 - 检查它！
</div>
<!-- 危险提示框 -->
<div class="alert alert-danger" role="alert">
这是一个危险提示框 - 检查它！
</div>
<!-- 警告提示框 -->
<div class="alert alert-warning" role="alert">
这是一个警告提示框 - 检查它！
</div>
<!-- 信息提示框 -->
<div class="alert alert-info" role="alert">
这是一个信息提示框 - 检查它！
</div>提示框链接
使用 .alert-link 类为提示框内的链接添加适当的颜色。
可关闭提示框
添加关闭按钮和必要的JavaScript，使提示框可以关闭。
警告！ 这是一个可关闭的警告提示框。
成功！ 这是一个可关闭的成功提示框。
错误！ 这是一个可关闭的错误提示框。
<!-- 可关闭提示框 -->
<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>
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>成功！</strong> 这是一个可关闭的成功提示框。
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>关闭按钮位置
关闭按钮可以放在提示框的不同位置。
关闭按钮在左侧的信息提示框
<!-- 左侧关闭按钮 -->
<div class="alert alert-info d-flex align-items-center" role="alert">
<button type="button" class="btn-close me-auto" data-bs-dismiss="alert" aria-label="Close"></button>
<span>关闭按钮在左侧的信息提示框</span>
</div>带图标的提示框
在提示框中添加图标，增强视觉传达效果。
<!-- 带图标的提示框 -->
<div class="alert alert-primary alert-with-icon" role="alert">
<div class="alert-icon">
<i class="bi bi-info-circle-fill"></i>
</div>
<div>
<strong>信息提示</strong><br>
这是一个带图标的主要提示框。
</div>
</div>
<div class="alert alert-success alert-with-icon" role="alert">
<div class="alert-icon">
<i class="bi bi-check-circle-fill"></i>
</div>
<div>
<strong>操作成功</strong><br>
这是一个带图标的成功提示框。
</div>
</div>可关闭的带图标提示框
结合图标和关闭功能，创建完整的用户提示体验。
信息提示
这是一个可关闭的带图标提示框。
这是一个可关闭的带图标提示框。
<!-- 可关闭的带图标提示框 -->
<div class="alert alert-info alert-dismissible fade show d-flex" role="alert">
<div class="alert-icon">
<i class="bi bi-info-circle-fill"></i>
</div>
<div class="flex-grow-1">
<strong>信息提示</strong><br>
这是一个可关闭的带图标提示框。
</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>高级提示框
带额外内容的提示框
在提示框中添加更复杂的内容结构。
自定义样式提示框
使用自定义CSS创建独特的提示框样式。
自定义提示框
这是一个使用自定义样式的提示框示例。
这是一个使用自定义样式的提示框示例。
<!-- 带额外内容的提示框 -->
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">操作成功！</h4>
<p>您的账户设置已成功更新。我们已经保存了您所做的所有更改，新设置将立即生效。</p>
<hr>
<p class="mb-0">如果您有任何问题，请随时联系我们的 <a href="#" class="alert-link">客服团队</a>。</p>
</div>
<!-- 自定义样式提示框 -->
<div class="alert custom-alert" style="border-left-color: #6f42c1; background-color: rgba(111, 66, 193, 0.1);">
<strong>自定义提示框</strong><br>
这是一个使用自定义样式的提示框示例。
</div>提示框中的按钮
在提示框中添加操作按钮。
确认操作
您确定要执行此操作吗？此操作不可撤销。
您确定要执行此操作吗？此操作不可撤销。
<!-- 带按钮的提示框 -->
<div class="alert alert-warning d-flex align-items-center" role="alert">
<div class="flex-grow-1">
<strong>确认操作</strong><br>
您确定要执行此操作吗？此操作不可撤销。
</div>
<div class="ms-3">
<button class="btn btn-outline-warning btn-sm me-2">取消</button>
<button class="btn btn-warning btn-sm">确认</button>
</div>
</div>交互提示框
使用JavaScript创建动态交互的提示框。
动态提示框生成器
自动消失的提示框
创建在指定时间后自动消失的提示框。
提示框使用最佳实践
语义化使用
- 根据消息类型选择合适的提示框颜色
- 成功消息使用绿色，错误消息使用红色
- 信息性消息使用蓝色，警告消息使用黄色
- 保持颜色使用的一致性
内容设计
- 保持提示框内容简洁明了
- 使用清晰的标题和描述性文本
- 为重要操作提供明确的行动号召
- 避免在提示框中放置过多内容
用户体验
- 为可操作消息提供关闭选项
- 使用图标增强消息的可识别性
- 考虑消息的显示时间和位置
- 避免过度使用提示框打扰用户
可访问性
- 为所有提示框添加适当的ARIA角色
- 确保颜色对比度符合可访问性标准
- 为关闭按钮提供有意义的标签
- 考虑屏幕阅读器用户的体验