如何在 Bootstrap 中向列表组添加徽章?
在 Bootstrap 中向列表组添加徽章是创建引人入胜且信息丰富的用户界面的关键环节。徽章使开发人员能够与列表组项目一起显示重要信息，例如通知计数、未读消息或即将发生的事件，从而使用户能够快速轻松地识别相关内容。虽然在 Bootstrap 中向列表组添加徽章看似一项艰巨的任务，但在适当的指导下，该过程可以轻松完成。在本文中，我们将逐步探讨在 Bootstrap 中向列表组添加徽章的方法，重点介绍 Bootstrap 框架中可用的底层语法和自定义选项。
徽章
徽章是一种符号，它附加在链接上，用于显示与其相关的对象的数量。徽章的一个例子是通知数字，它显示了最近收到的通知的数量，在登录特定网站时可见。徽章可以通过使用相对字体大小调整大小，以适应相邻父组件的尺寸。通过将徽章放置在列表组旁边，可以突出显示该组的显著特征，从而为该系列的重要方面注入活力。
Bootstrap 中有八种类型的徽章。它们如下 -
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
方法
要在 Bootstrap 中将徽章添加到列表集合，我们将结合使用 .badge 分类和 .list-group-item 分类。
示例
以下代码创建一个基于 Bootstrap 的 HTML 网页。在 head 部分，通过 link 和 script 标签使用 CDN 导入 Bootstrap。body 部分包含一个 list-group <ul> 标签，该标签由 list-group-items 的 <li> 标签组成。每个 <li> 标签包含一个"span"元素和一个用于显示徽章的"badge"类。为了展示不同类型的徽章，每个 <li>使用"bg-primary"、"bg-secondary"、"bg-success"、"bg-danger"、"bg-warning"、"bg-info"、"bg-light"或"bg-dark"类为元素分配唯一的背景颜色。
<!DOCTYPE html>
<html>
<head>
<title>How to add badge to list group in Bootstrap?</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.2/js/bootstrap-toggle.min.js"></script>
<link href="https://gitcdn.github.io/bootstrap-toggle/2.2.2/css/bootstrap-toggle.min.css" rel="stylesheet">
</head>
<body>
<h4>How to add badge to list group in Bootstrap?</h4>
<ul class="list-group">
<li class="list-group-item">This is <span class="badge bg-primary">bg-primary</span></li>
<li class="list-group-item">This is <span class="badge bg-secondary">bg-secondary</span></li>
<li class="list-group-item">This is <span class="badge bg-success">bg-success</span></li>
<li class="list-group-item">This is <span class="badge bg-danger">bg-danger</span></li>
<li class="list-group-item">This is <span class="badge bg-warning">bg-warning</span></li>
<li class="list-group-item">This is <span class="badge bg-info">bg-info</span></li>
<li class="list-group-item">This is <span class="badge bg-light">bg-light</span></li>
<li class="list-group-item">This is <span class="badge bg-dark">bg-dark</span></li>
</ul>
</body>
</html>
结论
在本文中，我们简要了解了 Bootstrap 中的徽章。我们了解了徽章及其各种类型。我们还了解了如何借助 list-group-item 和 badge 类将徽章添加到 Bootstrap 中的列表组。最后，向列表组添加徽章可以以美观易读的格式提供附加信息，从而显著提升网站的用户体验。
