- primary：重要，通过醒目的彩色设计，比如深蓝色，提示浏览者注意阅读。
- secondary：次要，通过灰色的视觉变化进行提示。
- success：成功，能过积极的亮绿色表示成功或积极的动作。
- danger：危险，通过红色提醒危险操作信息。
- warning：警告，通过黄色提醒应该谨慎操作。
- info：信息，通过浅蓝色提示相关信息。
- light：明亮，明亮的白色。
- dark：深深的黑色。
以徽章的颜色为例，给一个例子。
示例代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置徽章的颜色</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">设置徽章的颜色</h3>
<span class="badge badge-primary">主要</span>
<span class="badge badge-secondary">次要</span>
<span class="badge badge-success">成功</span>
<span class="badge badge-danger">危险</span>
<span class="badge badge-warning">警告</span>
<span class="badge badge-info">信息</span>
<span class="badge badge-light">明亮</span>
<span class="badge badge-dark">深色</span>
</body>
</html>
