在本文中，我们将学习如何制作一个徽章列表，在列表的优先级基础上给出想法。列表组用于显示一系列内容。我们可以使用列表组以有组织的方式显示一系列或内容列表，这会很有帮助，因为我们可以根据需要对其进行修改。
徽章是与链接关联的数字标签，用于指示与链接关联的项目数。例如，当登录特定网站时可以看到通知编号，该网站通过单击告知要查看的新通知编号。徽章通过使用相对字体大小来缩放以匹配直接父元素的大小。列表组旁边的徽章有助于我们吸引观众的注意力，以突出列表组中的重点。它有助于为给定系列中的重要数据增添活力。
句法：
-
Badge Content
list-content
类型：以下是 Bootstrap 5 中可用的 8 种背景类型。
- BG-主要
- bg-次要
- 成功
- bg-危险
- 背景警告
- 背景信息
- 背景光
- BG-暗
我们将通过示例了解使用所有这些类型的徽章的目的。
示例 1：此示例说明了具有不同类型徽章的基本列表组。这些徽章通过它们的背景颜色表示一种情感，例如成功、危险和中立。
HTML
Geeksforgeeks
-
New
Courses
-
Discontinued
Programs
-
Most popular
Classes
-
Expiring soon
Hackathon
-
Going fast
Job Portal
-
Exciting news
Golden membership
-
Click bait
Login to US
HTML
Geeksforgeeks
-
New and improved
-
Discontinued
-
Most popular
10
输出：
示例 2：在此示例中，我们可以进一步分别自定义列表组和徽章以获得我们想要的结果。我们将使用带有圆形药丸类的药丸状徽章作为列表组中的通知徽章。
HTML
Geeksforgeeks
-
New and improved
-
Discontinued
-
Most popular
10
输出：
参考：
- Bootstrap-5 徽章
- 使用示例在引导程序中列出组
- 徽章和面包屑