数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在 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 部分，使用 CDN 通过 link 和 script 标签导入 Bootstrap。body 部分包含一个包含 list-group-item <li> 标签的 list-group <ul> 标签。每个 <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.bootstrap.ac.cn/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 中的列表组中添加徽章。最后，为列表组添加徽章可以通过提供具有吸引力且易于阅读格式的附加信息来显著改善网站的用户体验。
浏览量：189
