徽章 Badge
徽章是用于计数与状态标记的小型组件，通过相对字体大小和 em 单位自动缩放，以匹配父元素的字号，常出现在标题、按钮与导航角落。
基础颜色
传统写法：以 badge 叠加 bg-* 背景色类配色；浅色徽章对比度不足，需手动搭配 text-dark 文字色。
主要
次要
成功
危险
警告
信息
浅色
深色
HTML 示例
圆角胶囊
添加 rounded-pill 类得到全圆角的胶囊形态，计数标签常用。
主要
次要
成功
危险
警告
信息
浅色
深色
HTML 示例
按钮内徽章
徽章可以放进按钮或标题中作为计数器；它使用 em 单位，会随父元素字号自动缩放。
文章标题示例 新
文章标题示例 新
HTML 示例
右上角定位
配合 position-relative、position-absolute 与 translate-middle 工具类，把计数徽章或小圆点指示器贴在按钮角落。
HTML 示例
背景色与文字色变体
v5.2 起推荐使用 text-bg-* 辅助类：一个类同时给出背景色与对比度足够的前景文字色，无需手动配对 text-* 与 bg-*。
主要
次要
成功
危险
警告
信息
浅色
深色
HTML 示例