Bootstrap 简明教程
Bootstrap - Badges
本章将讨论 Bootstrap 标记和创建标记的类。Bootstrap 标记通常用于突出显示网页上的重要详细信息，例如标题、警告和通知计数器。
This chapter will discuss about bootstrap badges and the classes to create badges. Badges are frequently used for highlighting important details on web pages, such as headings, warnings, and notification counters.
Bootstrap 标记是数值指示或通知计数器（一个链接有多少关联项目）。
Bootstrap badges are numerical indication or notification counters (of how many items are associated with a link).
Badges
为了根据直接父元素的大小调整它们的大小，徽章使用了比较字体缩放和 em 单位。在页面链接中， focus 或 hover 样式不再受 5.0 版支持。
To scale them according to the size of the immediate parent element, badge uses comparative font scaling and em units. In page links, focus or hover styles are no longer supported as of version 5.
下面的示例展示了如何使用 Bootstrap 创建内联徽章。
Following example demonstrates how to create inline badges using Bootstrap.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!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>Buttons
徽章可作为 links 或 buttons 的一部分来提供计数器。由于徽章的样式，用户只能看到徽章的内容，这提供了一种视觉提示，说明徽章的用途。根据具体情况，这些徽章可能看起来是 sentence 、 link 或 button 结束时添加的随机单词或数字。
Badges can be used as part of links or buttons to provide a counter. The users will only see the content of the badge because of how badges are styled, which gives a visual cue as to their purpose. These badges may appear to be random additions of words or numbers at the conclusion of a sentence, a link, or a button, based on the circumstances.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!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>Notifications
此示例解释了一个视觉隐藏类，其中包含一小段附加文本，用户可以看到数字“32”代表通知数。
This example explains a visually hidden class with a portion of additional text where users can see the digit *"32" *represents the number of notifications.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!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>Positioned
.badge 可以使用 top-0 *, *start-100 *, *translate-middle 实用程序进行修改，并放置在链接或按钮的角上。让我们看看下面的示例，了解它通常如何运行。
A .badge can be modified with top-0 *, *start-100 *, *translate-middle utilities and placed in the corner of a link or button. Let’s look at the sample below to see how it generally functions.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!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>Indicator
Bootstrap 徽章是与链接关联的项目数量的数字指示。被 new 或 unread 的项目使用徽章突出显示。
Bootstrap Badges are a numerical indication of the number of items associated with a link. Items that are new or unread are highlighted using badges
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!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>Background colors
使用 .text-bg-{color} helpers *, users may set a *background color 和对比的前景色。过去，必须手动配对首选 .text-{color} 和 .bg-{color} 实用程序才能进行样式设置；但是，用户仍然可以自由地这样做，如果他们愿意的话。
Using the .text-bg-{color} helpers *, users may set a *background color with a contrasting foreground color. In the past, pairing the preferred .text-{color} and .bg-{color} utilities manually was necessary for styling; nevertheless, users are still free to do so if they wish.
使用 bootstrap 背景色框架提供的 text-bg-primary 、 text-bg-info 、 text-bg-success 等实用程序类来即时更改徽章的外观。
Use the text-bg-primary, text-bg-info, text-bg-success etc. utility classes offered by bootstrap’s background colour framework to instantly change the appearance of the badges.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!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>Pill Badges
用户可以通过使用 。rounded-pill 修改器类，设计成例如 pills 形状的徽章，或具有更圆角的徽章，如下面的示例所示。
Users can design badges in the shape of pills, or badges having more rounded corners, by using the *.rounded-pill *modifier class, as demonstrated in the example below.
为了快速修改徽章的外观，请使用 bootstrap 背景色框架中提供的 .rounded-pill 实用程序类。
To quickly modify the appearance of the badges, use the .rounded-pill utility classes provided in bootstrap’s background color framework.
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
You can edit and try running this code using *Edit & Run * option.
<!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>