Bootstrap - 徽章

本章将讨论引导徽章和创建徽章的类。徽章经常用于突出显示网页上的重要细节，例如标题、警告和通知计数器。

Bootstrap 徽章是数字指示或通知计数器（与链接关联的项目数）。

徽章

为了根据直接父元素的大小缩放它们，徽章使用比较字体缩放和em单位。从版本 5 开始，页面链接中不再支持焦点或悬停样式。

以下示例演示了如何使用 Bootstrap 创建内联徽章。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <h1>Sample heading <span class="badge bg-secondary">New</span></h1>
  <h2>Sample heading <span class="badge bg-secondary">Offer</span></h2>
  <h3>Sample heading <span class="badge bg-secondary">New</span></h3>
  <h4>Sample heading <span class="badge bg-secondary">Offer</span></h4>
  <h5>Sample heading <span class="badge bg-secondary">New</span></h5>
  <h6>Sample heading <span class="badge bg-secondary">Offer</span></h6>
  </body>
  </html>

纽扣

徽章可以用作链接或按钮的一部分来提供计数器。用户只能看到徽章的内容，因为徽章的样式可以提供有关其用途的视觉提示。根据具体情况，这些徽章可能看起来是在句子、链接或按钮结尾处随机添加的单词或数字。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body>
    <button type="button" class="btn btn-success" style="margin: 20px;">
      Messages <span class="badge text-bg-warning">6</span>
    </button>
  </body>
  </html>

通知

此示例解释了一个视觉上隐藏的类，其中包含一部分附加文本，用户可以在其中看到数字“32”代表通知数量。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-success position-relative" style="margin: 20px;">
    Notifications
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-primary">
      32+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

定位

.badge可以使用top-0、start-100、translate-middle实用程序进行修改，并放置在链接或按钮的角落。让我们看一下下面的示例，了解它的一般功能。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
     <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-primary position-relative" style="margin: 20px;">
    Inbox
    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-info">
      55+
      <span class="visually-hidden">unread notifications</span>
    </span>
  </button>
</body>
  </html>

指标

引导徽章是与链接关联的项目数量的数字指示。新的或未读的项目使用徽章突出显示

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
  <body>
  <button type="button" class="btn btn-info position-relative" style="margin: 20px;">
    Webinar
    <span class="position-absolute top-0 start-100 translate-middle p-2 bg-primary border border-light rounded-circle">
      <span class="visually-hidden">New notifications</span>
    </span>
  </button>
</body>
  </html>

背景颜色

使用.text-bg-{color} 帮助程序，用户可以设置具有对比前景色的背景色。过去，需要手动配对首选的.text-{color}和.bg-{color}实用程序来设置样式；尽管如此，如果用户愿意，他们仍然可以自由地这样做。

使用bootstrap 的背景颜色框架提供的text-bg-primary、text-bg-info、text-bg-success等实用程序类来立即更改徽章的外观。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
      </head>
      <body style="margin: 20px;">
      <span class="badge text-bg-primary">Primary</span>
      <span class="badge text-bg-info">Info</span>
      <span class="badge text-bg-secondary">Secondary</span>
      <span class="badge text-bg-success">Success</span>
      <span class="badge text-bg-light">Light</span>
      <span class="badge text-bg-dark">Dark</span>
      <span class="badge text-bg-warning">Warning</span>
      <span class="badge text-bg-danger">Danger</span>
      </body>
      </html>

药丸徽章

用户可以使用.rounded-pill修饰符类来设计药丸形状的徽章，或者具有更圆角的徽章，如下例所示。

要快速修改徽章的外观，请使用bootstrap 的背景颜色框架中提供的.rounded-pill实用程序类。

例子

您可以使用编辑和运行选项编辑并尝试运行此代码。

  <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
      <title>Bootstrap - Badges</title>
  </head>
    <body style="margin: 20px;">
    <span class="badge rounded-pill text-bg-primary">Primary</span>
    <span class="badge rounded-pill text-bg-secondary">Secondary</span>
    <span class="badge rounded-pill text-bg-info">Info</span>
    <span class="badge rounded-pill text-bg-success">Success</span>
    <span class="badge rounded-pill text-bg-light">Light</span>
    <span class="badge rounded-pill text-bg-dark">Dark</span>
    <span class="badge rounded-pill text-bg-danger">Danger</span>
    <span class="badge rounded-pill text-bg-warning">Warning</span>
    </body>
  </html>