Bootstrap 徽章与进度条

学习Badge徽章和Progress进度条组件的使用 · 难度：入门 · +15XP

Badge 徽章

用于显示计数、状态标签等小型信息。

<span class="badge bg-primary">新</span>
<span class="badge bg-success">已完成</span>
<span class="badge bg-danger">99+</span>

<!-- 圆角胶囊 -->
<span class="badge rounded-pill bg-warning text-dark">3条</span>

<!-- 在按钮中 -->
<button class="btn btn-primary">
  消息 <span class="badge bg-danger">4</span>
</button>

Progress 进度条

<div class="progress">
  <div class="progress-bar" style="width:60%">60%</div>
</div>

<!-- 颜色变体 -->
<div class="progress-bar bg-success" style="width:80%"></div>
<div class="progress-bar bg-danger" style="width:30%"></div>

<!-- 条纹动画 -->
<div class="progress-bar progress-bar-striped progress-bar-animated"
     style="width:75%">加载中...</div>

<!-- 多段组合 -->
<div class="progress">
  <div class="progress-bar bg-success" style="width:30%">30%</div>
  <div class="progress-bar bg-warning" style="width:20%">20%</div>
</div>

💡 练习

创建任务进度面板：包含任务状态徽章（完成/进行中/待开始）和整体完成率进度条。