Bootstrap 简明教程
Bootstrap - Badges
本章将讨论 Bootstrap 标记和创建标记的类。Bootstrap 标记通常用于突出显示网页上的重要详细信息，例如标题、警告和通知计数器。
Bootstrap 标记是数值指示或通知计数器（一个链接有多少关联项目）。
Badges
为了根据直接父元素的大小调整它们的大小，徽章使用了比较字体缩放和 em 单位。在页面链接中， focus 或 hover 样式不再受 5.0 版支持。
下面的示例展示了如何使用 Bootstrap 创建内联徽章。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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 结束时添加的随机单词或数字。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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”代表通知数。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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 实用程序进行修改，并放置在链接或按钮的角上。让我们看看下面的示例，了解它通常如何运行。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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 的项目使用徽章突出显示。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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} 实用程序才能进行样式设置；但是，用户仍然可以自由地这样做，如果他们愿意的话。
使用 bootstrap 背景色框架提供的 text-bg-primary 、 text-bg-info 、 text-bg-success 等实用程序类来即时更改徽章的外观。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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 形状的徽章，或具有更圆角的徽章，如下面的示例所示。
为了快速修改徽章的外观，请使用 bootstrap 背景色框架中提供的 .rounded-pill 实用程序类。
Example
您可以使用 *编辑和运行 *选项编辑和尝试运行此代码。
<!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>