Bootstrap:设置自定义颜色 [英] Bootstrap: setting custom colors

问题描述

我在项目中使用 bootstrap 4.0.0 .我知道引导程序定义了诸如-primary 之类的变量来定义按钮的颜色(在本例中为 .btn-primary ).相反，我想使用自己的自定义颜色.但是，即使在< link> 标记之前或之后的 HTML 文件中插入以下代码段，我也无法设置其他原色"颜色 bootstrap.css .

I am using bootstrap 4.0.0 in a project. I know that bootstrap defines variables such as --primary to define the color of buttons (in this case .btn-primary). Instead, I would like to have my custom color. However, I didn't manage to set another "primary" color, even inserting the following snippet of code in the HTML files before or after the <link> tag for the bootstrap.css.

<style>
  :root {
     --primary: #009c68;
  }
</style>

推荐答案

您可以通过添加！important;"来覆盖引导程序样式.例如，在您的html中，您可能会有类似的内容:

You can overwrite bootstrap styles by adding "!important;" For example in your html you might have something like this:

<button type="button" class="btn btn-primary">Primary</button>

您可以这样更改颜色:

<button type="button" class="btn" style="background-color: #009c68!important;">Primary</button>

在CSS中，！important表示这很重要"，请忽略所有后续规则，然后应用！important规则.有关更多信息，您可以在此处.

In CSS, the !important means that "this is important", ignore all the subsequent rules, and apply !important rule. For more information you can go here.

如果该答案不适用于您所给的情况，建议您考虑使用Bootstrap主题.可以在此处找到说明如何自定义Bootstrap 4和修改现有颜色的文档.

If this answer does not work with your given situation, I would suggest looking into Bootstrap Theming. Documentation explaining how to customize Bootstrap 4 and modify existing colors can be found here.

这篇关于Bootstrap:设置自定义颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！