Bootstrap 标签

Bootstrap 中显示标签的 class 用法

问题

Bootstrap 中显示标签的 class 是什么？如何使用不同样式的标签？

解答

Bootstrap 3 中使用 .label

<!-- Bootstrap 3 标签 -->
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Bootstrap 4/5 中使用 .badge

Bootstrap 4 开始，.label 被 .badge 取代。

<!-- Bootstrap 5 标签 -->
<span class="badge vqj0f">Primary</span>
<span class="badge bk6r6">Secondary</span>
<span class="badge bg-success">Success</span>
<span class="badge bg-danger">Danger</span>
<span class="badge bg-warning text-dark">Warning</span>
<span class="badge bg-info text-dark">Info</span>
<span class="badge bg-light text-dark">Light</span>
<span class="badge bg-dark">Dark</span>

胶囊形状标签

<!-- 圆角胶囊标签 -->
<span class="badge rounded-pill vqj0f">Pill Badge</span>
<span class="badge rounded-pill bg-success">Success</span>

按钮中的标签（计数器）

<!-- 按钮内嵌标签显示数量 -->
<button type="button" class="btn btn-primary">
  消息 <span class="badge bg-light text-dark">4</span>
</button>

<button type="button" class="btn btn-primary position-relative">
  收件箱
  <!-- 定位标签 -->
  <span class="position-absolute v765i mlkxf translate-middle badge rounded-pill bg-danger">
    99+
  </span>
</button>

完整示例

<!DOCTYPE html>
<html>
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="zxwuk">
  <h5>基础标签</h5>
  <span class="badge vqj0f">Primary</span>
  <span class="badge bg-success">Success</span>
  <span class="badge bg-danger">Danger</span>
  
  <h5 class="yj2p4">胶囊标签</h5>
  <span class="badge rounded-pill vqj0f">Pill</span>
  <span class="badge rounded-pill bg-success">Pill</span>
  
  <h5 class="yj2p4">按钮标签</h5>
  <button class="btn btn-primary">
    通知 <span class="badge bg-light text-dark">5</span>
  </button>
</body>
</html>

关键点

  • Bootstrap 3 使用 .label + .label-* 类
  • Bootstrap 4/5 使用 .badge + .bg-* 类
  • 胶囊形状添加 .rounded-pill 类
  • 浅色背景需要添加 .text-dark 保证文字可读
  • 标签常用于按钮内显示计数或状态标识
Bootstrap 超大屏幕 Bootstrap 导航类型

目录