为什么我们不能在bootstrap 4中使用css更改徽章类的颜色？

在Bootstrap 4中，徽章类的颜色不能直接通过CSS更改的原因是，Bootstrap 4采用了一种新的颜色系统，即使用CSS变量来定义颜色。徽章类的颜色是通过这些CSS变量来控制的，而不是通过直接的CSS属性。

这种设计有以下几个优势：

1. 灵活性：使用CSS变量可以轻松地在整个网站或应用程序中更改主题颜色，而无需逐个修改每个徽章的CSS样式。
2. 可维护性：通过集中定义颜色变量，可以更方便地管理和维护整个项目的颜色样式。
3. 可扩展性：使用CSS变量可以方便地扩展和定制Bootstrap的颜色系统，以满足不同项目的需求。

虽然不能直接通过CSS更改徽章类的颜色，但可以通过覆盖Bootstrap的颜色变量来实现自定义颜色。具体做法是在自定义的CSS文件中定义相应的颜色变量，并在徽章类中使用这些自定义变量。

以下是一个示例代码，展示如何在Bootstrap 4中自定义徽章类的颜色：

/* 自定义颜色变量 */
:root {
  --badge-primary-color: #ff0000;
  --badge-secondary-color: #00ff00;
}

/* 使用自定义颜色变量 */
.badge-primary {
  background-color: var(--badge-primary-color);
}

.badge-secondary {
  background-color: var(--badge-secondary-color);
}

在上述示例中，我们定义了两个自定义颜色变量--badge-primary-color和--badge-secondary-color，并在徽章类的CSS样式中使用了这些变量来设置背景颜色。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。

• 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建、部署和扩展云服务器实例。了解更多信息，请访问：腾讯云云服务器
• 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，可用于存储和管理各种类型的数据。了解更多信息，请访问：腾讯云对象存储