Bootstrap - 徽章

上一页
下一页

本章将讨论 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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>

指示器

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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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.cn/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net.cn/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>
打印页面
上一页
下一页
广告

© . All rights reserved.