徽章是小型的计数和标签组件，用于突出显示新内容、未读项目或状态信息。Bootstrap 4 提供了灵活多样的徽章样式，可以轻松添加到各种UI元素中。
Bootstrap 4 提供了多种语义颜色的徽章样式，用于传达不同类型的信息。
<!-- 主要徽章 -->
<span class="badge badge-primary">主要</span>
<!-- 成功徽章 -->
<span class="badge badge-success">成功</span>
<!-- 危险徽章 -->
<span class="badge badge-danger">危险</span>
<!-- 警告徽章 -->
<span class="badge badge-warning">警告</span>
<!-- 信息徽章 -->
<span class="badge badge-info">信息</span>
使用 .badge-pill 类创建圆角更明显的药丸形状徽章。
<!-- 主要药丸徽章 -->
<span class="badge badge-primary badge-pill">主要</span>
<!-- 成功药丸徽章 -->
<span class="badge badge-success badge-pill">成功</span>
<!-- 危险药丸徽章 -->
<span class="badge badge-danger badge-pill">危险</span>
<!-- 警告药丸徽章 -->
<span class="badge badge-warning badge-pill">警告</span>
徽章可以根据其使用场景采用不同的颜色变体，以传达特定的含义。
<!-- 状态指示徽章 -->
<span class="badge badge-success">在线</span>
<span class="badge badge-secondary">离线</span>
<span class="badge badge-warning">忙碌</span>
<span class="badge badge-danger">勿扰</span>
<!-- 优先级标签 -->
<span class="badge badge-danger">紧急</span>
<span class="badge badge-warning">高</span>
<span class="badge badge-info">中</span>
<span class="badge badge-secondary">低</span>
<!-- 内容标签 -->
<span class="badge badge-primary">技术</span>
<span class="badge badge-success">设计</span>
<span class="badge badge-info">营销</span>
徽章可以放置在各种UI元素中，如按钮、导航项、标题等。
<!-- 按钮中的徽章 -->
<button type="button" class="btn btn-primary">
通知 <span class="badge badge-light">4</span>
</button>
<!-- 导航中的徽章 -->
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
收件箱 <span class="badge badge-primary badge-pill">14</span>
</a>
</li>
</ul>
<!-- 标题中的徽章 -->
<h3>产品功能 <span class="badge badge-secondary">新</span></h3>
<!-- 通知徽章 -->
<div class="notification-badge">
<button class="btn btn-outline-primary">
<i class="fas fa-bell"></i> 通知
</button>
<span class="badge badge-danger badge-pill">5</span>
</div>
徽章也可以作为链接使用，只需将徽章放在 <a> 标签中。
<!-- 链接徽章 -->
<a href="#" class="badge badge-primary">主要链接</a>
<a href="#" class="badge badge-secondary">次要链接</a>
<a href="#" class="badge badge-success">成功链接</a>
<!-- 药丸链接徽章 -->
<a href="#" class="badge badge-primary badge-pill">主要药丸链接</a>
<a href="#" class="badge badge-secondary badge-pill">次要药丸链接</a>
<a href="#" class="badge badge-success badge-pill">成功药丸链接</a>
您可以在徽章中添加图标，增强徽章的视觉效果和可识别性。
<!-- 带图标的徽章 -->
<span class="badge badge-primary">
<i class="fas fa-check"></i> 已完成
</span>
<!-- 带图标的药丸徽章 -->
<span class="badge badge-primary badge-pill">
<i class="fas fa-user"></i> 用户
</span>
您可以通过添加自定义CSS类来创建独特的徽章样式。
<style>
.badge-custom {
background: linear-gradient(45deg, #6f42c1, #e83e8c);
border: none;
color: white;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
</style>
<span class="badge badge-custom">自定义徽章</span>
<span class="badge badge-custom badge-pill">自定义药丸徽章</span>
以下是一些在实际项目中如何使用徽章的示例。
管理系统的用户账户和权限。
跟踪项目进度和任务状态。
恭喜！您已经学习了Bootstrap 4徽章组件的核心概念和功能。徽章是创建直观用户界面的重要元素，掌握这些技巧将帮助您设计出更好的用户体验。
继续学习下一章：Bootstrap 4 卡片组件