css - 向 Bootstrap 添加颜色类

Question

我查看了 Bootstrap，发现其中包含的“颜色类别”很少(主要、成功、危险等)我想知道是否有一种方法可以添加更多类，例如以简单的方式提到的类。

例如:“primary”可以与许多元素一起使用，并将应用定义的颜色，其他颜色类也是如此。我可以创建一个名为“important”的类，定义它的颜色并将它应用到任何地方，就像包含的类一样，而不是为每个元素单独制作它的版本(使用纯 css 或任何预处理器)

谢谢!

Answer 1

这是一个较旧的问题，但公认的答案并不是最完整和/或面向 future 的。如果您将 SASS 编译作为构建步骤的一部分，这就是我的建议。

例如，如果你想为生成的 CSS 类添加一个新的“第三级”颜色，例如 text-tertiary, bg-tertiary, alert -tertiary等，我们可以使用以下步骤:

1. 设置一个 .scss 文件，其中将包含所有 SCSS 和 Bootstrap 覆盖。

@import "_variables";
@import "~bootstrap/scss/bootstrap.scss";

1. 为您的 Bootstrap 变量配置/覆盖创建您的 _variables.scss 文件:

@import "~bootstrap/scss/_functions.scss";
@import "~bootstrap/scss/_variables.scss";

// TODO: overwrite variables to style the app for the client's theme
$tertiary: #218f8b;

// Add "tertiary" styles to the generated classes
$theme-colors: (
  "tertiary": $tertiary,
);

进一步阅读:有关主题的更多信息，请参阅官方 Bootstrap 文档:https://getbootstrap.com/docs/4.0/getting-started/theming/#add-to-map