Bootstrap5 徽章

徽章是一种小型标签，用于标记和显示额外的信息。它们通常用于表示通知、计数器或状态等。在Bootstrap 5中，徽章通过简单的类名来实现，使它们易于使用且高度可定制。

徽章的基本使用

创建一个基本的徽章

在HTML中，只需将.badge类添加到<span>元素上即可创建一个基本的徽章。

<span class="badge">New</span>

使用不同的颜色

Bootstrap为徽章提供了多种颜色变体，这些变体可以通过添加相应的类名来实现。例如：

• .badge-primary
• .badge-secondary
• .badge-success
• .badge-danger
• .badge-warning
• .badge-info
• .badge-light
• .badge-dark

<span class="badge badge-primary">Primary</span>
<span class="badge badge-secondary">Secondary</span>
<span class="badge badge-success">Success</span>
<span class="badge badge-danger">Danger</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-light">Light</span>
<span class="badge badge-dark">Dark</span>

徽章与链接结合使用

徽章也可以与其他元素如链接一起使用。只需将.badge类添加到<a>标签上即可。

<a href="#" class="badge badge-primary">Primary</a>
<a href="#" class="badge badge-secondary">Secondary</a>
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-danger">Danger</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-light">Light</a>
<a href="#" class="badge badge-dark">Dark</a>

徽章的尺寸

除了颜色变体外，Bootstrap还提供了一些额外的类来改变徽章的尺寸。这些类包括：

• .badge-sm：小尺寸
• .badge-lg：大尺寸

<span class="badge badge-sm badge-primary">Primary</span>
<span class="badge badge-lg badge-secondary">Secondary</span>

徽章的圆角样式

默认情况下，Bootstrap的徽章是方形的，但你可以通过添加.rounded-pill类使其变为椭圆形或圆角矩形。

<span class="badge badge-pill badge-primary">Primary</span>
<span class="badge rounded-pill badge-secondary">Secondary</span>

徽章中的图标

你可以将Bootstrap图标库中的图标添加到徽章中，以增加视觉效果和信息量。

<span class="badge badge-primary">
  <i class="bi bi-star"></i> Primary
</span>

徽章作为列表项标记

徽章可以作为列表项的标记使用，只需将徽章添加到<li>元素中即可。

<ul>
  <li><span class="badge badge-primary">Primary</span> Item 1</li>
  <li><span class="badge badge-secondary">Secondary</span> Item 2</li>
</ul>

徽章在按钮中的应用

徽章也可以嵌入到按钮中，使按钮看起来更加动态和丰富。

<button type="button" class="btn btn-primary">
  Notifications <span class="badge badge-light">4</span>
</button>

徽章与导航链接结合使用

在导航栏中，徽章常用于表示未读消息或新通知的数量。

-- -------------------- ---- -------
---- ------------- ---------------- ------------ ----------
  -- -------------------- ------------------
  ---- --------------- -----------------
    --- ----------------- ---------
      --- --------------- --------
        -- ---------------- ------------- ----- ------------ -----------------------------
      -----
    -----
  ------
------

以上是关于Bootstrap 5徽章的基本使用方法和一些进阶技巧。通过这些示例，你应该能够开始在自己的项目中使用徽章了。如果你有任何疑问或需要更多帮助，请随时查阅Bootstrap官方文档或相关资源。