CSS 如何更改引导程序原色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38792005/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the bootstrap primary color?
提问by ashishjmeshram
Is it possible to change the bootstrap primary color to match to the brand color? I am using bootswatch's paper theme in my case.
是否可以更改引导程序原色以匹配品牌颜色？在我的案例中，我正在使用 bootswatch 的纸主题。
采纳答案by Zim
Update 2018 for Bootstrap 4
Bootstrap 4 更新 2018
To change the primary, or any of the theme colorsin Bootstrap 4 SASS, set the appropriate variables beforeimporting bootstrap.scss. This allows your custom scss to override the !default values...
要更改Bootstrap 4 SASS 中的主要或任何主题颜色，请在导入bootstrap.scss. 这允许您的自定义 scss 覆盖 !default 值...
$primary: purple;
$danger: red;
@import "bootstrap";
Demo: https://www.codeply.com/go/f5OmhIdre3
演示：https: //www.codeply.com/go/f5OmhIdre3
In some cases, you may want to set a new color from another existingBootstrap variable. For this @import the functions and variables first so they can be referenced in the customizations...
在某些情况下，您可能希望从另一个现有Bootstrap 变量设置新颜色。为此@import 首先调用函数和变量，以便在自定义中引用它们...
/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";
$theme-colors: (
primary: $purple
);
/* finally, import Bootstrap */
@import "bootstrap";
Demo: https://www.codeply.com/go/lobGxGgfZE
演示：https: //www.codeply.com/go/lobGxGgfZE
Also see this answer, or this answer for changing the button color in (CSS or SASS)
另请参阅此答案，或此答案以更改（CSS 或 SASS）中的按钮颜色
It's also possible to change the primary color with CSS onlybut it requires a lot of additional CSS since there are many -primaryvariations (btn-primary, alert-primary, bg-primary, text-primary, table-primary, border-primary, etc...) and some of these classes have slight colors variations on borders, hover, and active states. Therefore, if you must use CSS it's better to use target one component such as changing the primary button color.
也可以仅使用CSS更改原色，但它需要大量额外的 CSS，因为有许多-primary变体（btn-primary、alert-primary、bg-primary、text-primary、table-primary、border-primary 等） ...) 并且其中一些类在边框、悬停和活动状态上有轻微的颜色变化。因此，如果您必须使用 CSS，最好使用目标一个组件，例如更改主按钮颜色。
回答by Jorge Luis Saud Rosal
there are two ways you can go to
您可以通过两种方式前往
http://getbootstrap.com/customize/
and change the color in this adjustments and download the bootstrap customized.
并在此调整中更改颜色并下载自定义引导程序。
Or you can use sass with this version https://github.com/twbs/bootstrap-sassand import in your sass assets/stylesheets/_bootstrap.scss but before import this you can change the defaults variable colors
或者您可以在此版本https://github.com/twbs/bootstrap-sass 中使用 sass并导入您的 sass assets/stylesheets/_bootstrap.scss 但在导入之前您可以更改默认变量颜色
//== Colors
//
//## Gray and brand colors for use across Bootstrap.
$gray-base: #000 !default;
$gray-darker: lighten($gray-base, 13.5%) !default; // #222
$gray-dark: lighten($gray-base, 20%) !default; // #333
$gray: lighten($gray-base, 33.5%) !default; // #555
$gray-light: lighten($gray-base, 46.7%) !default; // #777
$gray-lighter: lighten($gray-base, 93.5%) !default; // #eee
$brand-primary: darken(#428bca, 6.5%) !default; // #337ab7
$brand-success: #5cb85c !default;
$brand-info: #5bc0de !default;
$brand-warning: #f0ad4e !default;
$brand-danger: #d9534f !default;
//== Scaffolding
//
//## Settings for some of the most global styles.
//** Background color for `<body>`.
$body-bg: #fff !default;
//** Global text color on `<body>`.
$text-color: $gray-dark !default;
//** Global textual link color.
$link-color: $brand-primary !default;
//** Link hover color set via `darken()` function.
$link-hover-color: darken($link-color, 15%) !default;
//** Link hover decoration.
$link-hover-decoration: underline !default;
and compile the result
并编译结果
回答by ling
I've created this tool: https://lingtalfi.com/bootstrap4-color-generator, you simply put primary in the first field, then choose your color, and click generate.
我创建了这个工具：https://lingtalfi.com/bootstrap4-color-generator，您只需将主要放在第一个字段中，然后选择您的颜色，然后单击生成。
Then copy the generated scss or css code, and paste it in a file named my-colors.scss or my-colors.css (or whatever name you want).
然后复制生成的 scss 或 css 代码，并将其粘贴到名为 my-colors.scss 或 my-colors.css（或您想要的任何名称）的文件中。
Once you compile the scss into css, you can include that css file AFTERthe bootstrap CSS and you'll be good to go.
一旦您将 scss 编译为 css，您就可以在引导 CSS之后包含该 css 文件，您就可以开始使用了。
The whole process takes about 10 seconds if you get the gist of it, provided that the my-colors.scssfile is already created and included in your head tag.
如果您掌握了要点，整个过程大约需要 10 秒钟，前提是my-colors.scss文件已经创建并包含在您的 head 标签中。
Note: this tool can be used to override bootstrap's default colors (primary, secondary, danger, ...), but you can also create custom colors if you want (blue, green, ternary, ...).
注意：此工具可用于覆盖引导程序的默认颜色（主要、次要、危险……），但您也可以根据需要创建自定义颜色（蓝色、绿色、三元……）。
Note2: this tool was made to work with bootstrap 4 (i.e. not any subsequent version for now).
注意2：这个工具是用来与bootstrap 4 一起使用的（即现在不是任何后续版本）。
回答by rauland
Bootstrap 4
引导程序 4
This is what worked for me:
这对我有用：
I created my own _custom_theme.scssfile with content similar to:
我创建了自己的_custom_theme.scss文件，内容类似于：
/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);
Added it to the top of the file bootstrap.scssand recompiled (In my case I had it in a folder called !scss)
将它添加到文件的顶部bootstrap.scss并重新编译（在我的情况下，我将它放在一个名为 !scss 的文件夹中）
@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
回答by N. Osil
Any element with 'primay' tag has the color @brand-primary. One of the options to change it is adding a customized css file like below:
任何带有 'primay' 标签的元素都具有 @brand-primary 颜色。更改它的选项之一是添加一个自定义的 css 文件，如下所示：
.my-primary{
color: lightYellow ;
background-color: red;
}
.my-primary:focus, .my-primary:hover{
color: yellow ;
background-color: darkRed;
}
a.navbar-brand {
color: lightYellow ;
}
.navbar-brand:hover{
color: yellow;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<br>
<nav class="navbar navbar-dark bg-primary mb-3">
<div class="container">
<a class="navbar-brand" href="/">Default (navbar-dark bg-primary)</a>
</div>
</nav>
<button type="button" class="btn btn-primary">Default (btn btn-primary)</button>
</div>
<br>
<div class="container">
<nav class="navbar my-primary mb-3">
<div class="container">
<a class="navbar-brand" href="/">Customized (my-primary)</a>
</div>
</nav>
<button type="button" class="btn my-primary">Customized (btn my-primary)</button>
</div>For more about customized css files with bootstrap, here is a helpful link: https://bootstrapbay.com/blog/bootstrap-button-styles/.
有关使用引导程序自定义 css 文件的更多信息，这里有一个有用的链接：https: //bootstrapbay.com/blog/bootstrap-button-styles/。
回答by Rami Alloush
This might be a little bit old question, but I want to share the best way I found to customize bootstrap.
There's an online tool called bootstrap.buildhttps://bootstrap.build/app. It works great and no installation or building tools setup required!
这可能是一个有点老的问题，但我想分享我发现的自定义引导程序的最佳方式。有一个名为bootstrap.buildhttps://bootstrap.build/app的在线工具。它运行良好，无需安装或构建工具设置！
回答by Alvin Konda
The correct way to change the default primary colour in Bootstrap 4.x using SASS, or any other colours like secondary, success and so on.
使用 SASS 或任何其他颜色（如次要、成功等）更改 Bootstrap 4.x 中默认主要颜色的正确方法。
Create the following SASS file and import Bootstrap SASS as indicated:
创建以下 SASS 文件并按指示导入 Bootstrap SASS：
// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";
$primary: blue;
$secondary: green;
$my-color: red;
$theme-colors: (
primary: $primary,
secondary: $secondary,
my-color: $my-color
);
// Add below your SASS or CSS code
// (Required) Import Bootstrap
@import "bootstrap/bootstrap";
回答by manish kumar
Using SaSS
change the brand color
使用 SaSS
更改品牌颜色
$brand-primary:#some-color;
this will change the primary color accross all UI.
Using css-
suppose you want to change button primary color.So
这将更改所有 UI 的主要颜色。
使用 css-
假设你想改变按钮的原色。所以
btn.primary{
background:#some-color;
}
search the element and add a new css/sass rule in a new file and attach it after u load the bootstrap css.
搜索元素并在新文件中添加新的 css/sass 规则，并在加载引导 css 后附加它。
回答by Gianpiero
Bootstrap 4 rules
Bootstrap 4 规则
Most of the answers here are more or less correct, but all of them with some issues (for me). So, finally, googleing I found the correct procedure, as stated in the dedicated bootstrap doc: https://getbootstrap.com/docs/4.0/getting-started/theming/.
这里的大多数答案或多或少都是正确的，但都存在一些问题（对我而言）。所以，最后，谷歌搜索我找到了正确的程序，如专用引导文档中所述：https: //getbootstrap.com/docs/4.0/getting-started/theming/。
Let's assume bootstrap is installed in node_modules/bootstrap.
让我们假设引导程序安装在node_modules/bootstrap.
A. Create your your_bootstrap.scssfile:
A. 创建您的your_bootstrap.scss文件：
@import "your_variables_theme"; // here your variables
// mandatory imports from bootstrap src
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables"; // here bootstrap variables
@import "../node_modules/bootstrap/scss/mixins";
// optional imports from bootstrap (do not import 'bootstrap.scss'!)
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
etc...
B. In the same folder, create the _your_variables_theme.scssfile.
B. 在同一个文件夹中，创建_your_variables_theme.scss文件。
C. Customize the bootstrap variables in _your_variables_theme.scssfile following this rules:
C._your_variables_theme.scss按照以下规则自定义文件中的引导程序变量：
Copy and paste variables from
_variables.scssas needed, modify their values, and remove the !default flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.Variable overrides within the same Sass file can come before or after the default variables. However, when overriding across Sass files, your overrides must come before you import Bootstrap's Sass files.
_variables.scss根据需要复制和粘贴变量，修改它们的值，并删除 !default 标志。如果一个变量已经被赋值，那么它不会被 Bootstrap 中的默认值重新赋值。同一个 Sass 文件中的变量覆盖可以出现在默认变量之前或之后。但是，当覆盖 Sass 文件时，您的覆盖必须在导入 Bootstrap 的 Sass 文件之前出现。
Default variables are available in node_modules/bootstrap/scss/variables.scss.
默认变量在node_modules/bootstrap/scss/variables.scss.
回答by Alex01
Since Bootstrap 4 you can easily change the primary color of your Bootstrapby downloading a simple CSS file on BootstrapColor.net. You don't need to know SASS and the CSS file is ready to use for your website. You can choose the color you want like blue, indigo, purple, pink, red, orange, yellow, green, teal or cyan color.
从 Bootstrap 4 开始，您可以通过在BootstrapColor.net上下载一个简单的 CSS 文件来轻松更改Bootstrap的主要颜色。您不需要了解 SASS，并且 CSS 文件已准备好用于您的网站。您可以选择您想要的颜色，如蓝色、靛蓝、紫色、粉红色、红色、橙色、黄色、绿色、蓝绿色或青色。
