Question

为背景定义的B.S. Background Colors引导颜色与为列表组定义的B.S.Contextual Class Colors不同。我的问题是：这种看似不一致的命名是什么原因？（请解释我是否错了）。谢谢。

Answer 1

背景颜色 实用程序类严格用于背景颜色，且前景/文本颜色上不带“意见”。这就是text-white实用工具类还用于在doc示例中设置文本颜色的原因。

上下文颜色是“ stateful background and color”，因此定义了背景颜色和对比文本颜色。这些颜色还用于表格和警报。

Bootstrap使用SASS函数从theme colors创建上下文颜色。 $theme-color-level函数使用$theme-color-interval var，您可以根据需要进行更改，然后重新生成list-group-item变量...

@each $color, $value in $theme-colors {
      @include list-group-item-variant($color, theme-color-level($color, -3), theme-color-level($color, 3));
}

演示：https://www.codeply.com/go/SfpaYAjsUM

Answer 2

这两个实际上是完全不同的。

列表项是在一类-list-group-item list-group-item-primary中预定义的背景和文本颜色。有关颜色在第二类中定义。这是嵌入在框架中的样式的实际观点。

但是，第二个示例由各种类构造而成，这些类专门声明了背景和文本颜色-bg-primary text-white。我认为这个示例比list-group-item-primary更“随机”。它们只是向您展示一些可以组合类的方法。这比列表少了。

我还要说，列表样式对于在一个列表中包含多个彩色项目的想法更为友好。如果它们完全不透明，最终结果将是压倒性的。饱和，完全不透明的背景对于“一次性”元素突出显示要好一些。

最后但并非最不重要的是，源颜色实际上是相同的。如果降低bg-primary的不透明度，则看起来就像0.3值附近的静音版本。

B.S.的上下文颜色命名不一致颜色类别

2 个答案: