Bootstrap 警告框与提示

掌握Bootstrap Alert组件和关闭按钮的交互 · 难度：入门 · +15XP

Bootstrap 警告框

Alert用于向用户显示重要提示信息。

颜色变体

<div class="alert alert-primary">提示信息</div>
<div class="alert alert-success">✅ 操作成功！</div>
<div class="alert alert-danger">❌ 操作失败！</div>
<div class="alert alert-warning">⚠️ 请注意检查</div>
<div class="alert alert-info">ℹ️ 提示信息</div>

可关闭的Alert

<div class="alert alert-warning alert-dismissible fade show">
  内容已过期
  <button class="btn-close" data-bs-dismiss="alert"></button>
</div>

Alert内容

<div class="alert alert-success">
  <h4 class="alert-heading">做得好！</h4>
  <p>你已成功完成操作。</p>
  <hr>
  <p class="mb-0">可包含链接<a href="#" class="alert-link">查看详情</a></p>
</div>

💡 练习

创建三个不同颜色的Alert：一条成功消息（可关闭）、一条警告、一条带标题和链接的信息。