Question

我开始浏览精彩的Bootstrap 4，并且我想知道如何在_custom.scss中添加一组全新的元素颜色

示例：现在你有btn-danger，text-danger等...如何创建例如，使用随机名称：＆＃34; crisp＆＃34;设置...所以你将拥有btn-crisp，text-crisp等......

我的猜测是从添加变量开始

$brand-crisp: #color !default;

但是，那又怎样？谢谢！我感谢您的帮助。

Answer 1

没有全包颜色mixin，所以我认为你需要单独使用mixins ......

.btn-custom {
    @include button-variant(#cece19, #222222, #cece19);
}

.btn-custom-outline {
    @include button-outline-variant(#222222);
}

.card-custom {
    @include card-variant(#aa9999, #997777)
}

http://www.codeply.com/go/MKGQCrLwDs

更新： 在Bootstrap 4中，您现在可以创建一个新的自定义＆＃34;主题颜色＆＃34;正如my answer here中所解释的那样。这样您就可以在btn-custom，text-custom，bg-custom等任何地方使用颜色......

更新Bootstrap 4.1

按钮mixins略有改变，现在需要添加＆＃39; l params ......

.btn-custom {
    @include button-variant(#cece19, #222222, #cece19, #cece19, #cece19, #cece19);
}

.btn-custom-outline {
    @include button-outline-variant(#222222, #cece19, #222222, #cece19);
}

@import "bootstrap";

Answer 2

您很幸运，因为今天我刚刚发布了一个在线工具，可以做到这一点：https://lingtalfi.com/bootstrap4-color-generator。

它将生成必要的CSS代码（使用sass或不使用sass选项），并为bootstrap4颜色生成10种颜色。

最后，我建议创建一个自定义“ my_colors.css”（或my_colors.scss）文件，并将所有生成的颜色放入其中。

请注意，我的工具仅更改颜色，而不关心其他属性（填充，字体大小等）。

希望这会有所帮助。

Answer 3

我创建完全自定义的颜色，然后通过创建custom.scss来添加颜色，添加新的主题颜色，然后将其编译为custom.css。以下是更改主题颜色以及添加新颜色（紫色）的示例。请注意，您需要在文件底部导入bootstrap.scss，以使其正常工作。这是一个示例：

$theme-colors: (
   "primary": #7189bf,
   "secondary": #667,
   "success": #72d6c9,
   "info": #00aedb,
   "warning": #df7599,
   "danger": #ffc785,
   "purple": #b19cd9,
);

@import '../../bootstrap/scss/bootstrap';

还有其他方法，我觉得这对我来说最简单。您可以在引导程序4中自定义更多功能，也可以在此文件中使用变量等来完成此操作。

我创建了一个使用此方法的模板，并显示了新主题颜色下所有元素的外观。我将在网络上找到的内容整理起来供我使用-随时随地将其用于您的内容或进行更改等。

以下是链接：https://github.com/steveshead/bootstrap4-elements-v2

如何使用sass在Bootstrap 4中创建新的颜色样式集

3 个答案: