Bootstrap 5中如何使用标签？替代已移除label类方案

Bootstrap 5已移除了原Bootstrap 3中的label系列类，官方推荐使用Badge组件作为替代，两者视觉表现接近，且适配Bootstrap 5的设计系统。

对应实现代码 #

Bootstrap 3的Label组件和Bootstrap 5 Badge组件的类名对应关系如下，直接替换类名即可实现类似效果：

<!-- Bootstrap 3 Label 对应 Bootstrap 5 Badge -->
<span class="badge bg-secondary">Default Label</span>
<span class="badge bg-primary">Primary Label</span>
<span class="badge bg-success">Success Label</span>
<span class="badge bg-info">Info Label</span>
<span class="badge bg-warning text-dark">Warning Label</span>
<span class="badge bg-danger">Danger Label</span>

注意：warning背景色较浅，需要添加text-dark类保证文字可读性，其他颜色默认文字为白色，无需额外设置。

贴近原Label样式的自定义调整 #

如果需要更贴近Bootstrap 3 Label的紧凑样式（更小内边距、更圆润的边角），可以自定义CSS补充：

/* 自定义类，模拟Bootstrap 3 Label的样式 */
.badge.label-like {
  padding: 0.25em 0.4em;
  font-size: 75%;
  border-radius: 0.25rem;
}

使用时只需要在Badge组件上添加自定义类：

<span class="badge bg-secondary label-like">Default Label</span>

内容的提问来源于stack exchange，提问作者Jack Miller