小开

是的, 我建议打开。在 css 文件中，检查页面并找到要更改的颜色代码，然后根据文本编辑器查找全部并替换为所需的颜色。对所有你想改变的颜色都这样做

小开

你有两种选择

并改变颜色在这个调整和下载自定义的引导程序。

或者您可以使用这个版本的 https://github.com/twbs/bootstrap-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;

然后汇编结果

小开

使用 SSS
改变品牌颜色

$brand-primary:#some-color;

这将改变所有用户界面的主颜色。

使用 css-< br > 假设您想要更改按钮的主颜色

btn.primary{
background:#some-color;
}

搜索元素并添加一个新的 css/sass 规则，并在加载引导程序 css 后附加它。

小开

任何带有’原始’标签的元素都具有 color@brand-置换。改变它的一个选项是添加一个定制的 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>

要了解更多关于自定义的 css 文件与引导，这里是一个有用的链接: https://bootstrapbay.com/blog/bootstrap-button-styles/。

小开

因为 Bootstrap 4可以通过在 Bootstrapcolor.net上下载一个简单的 CSS 文件来实现很容易改变您的引导程序的基本颜色。你不需要知道 SASS 和 CSS 文件已经准备好为您的网站使用。你可以选择你想要的颜色，比如蓝色、靛蓝色、紫色、粉红色、红色、橙色、黄色、绿色、青色或青色。

小开

最佳答案

Bootstrap 5(更新2021)

Bootstrap 5的方法仍然是相同的。

Https://codeply.com/p/iaulpargqe

鞋带4

要更改 Bootstrap 4 SASS 中 主题颜色的初选或任何，设置适当的变量之前导入 bootstrap.scss。这允许您的自定义 scss 覆盖！默认值。

$primary: purple;
$danger: red;


@import "bootstrap";

演示: https://codeply.com/go/f5OmhIdre3

在某些情况下，您可能希望从另一个存在引导变量设置新的颜色。对于这个@import，首先导入函数和变量，以便在定制中引用它们..。

/* import the necessary Bootstrap files */
@import "bootstrap/functions";
@import "bootstrap/variables";


$theme-colors: (
primary: $purple
);


/* finally, import Bootstrap */
@import "bootstrap";

演示: https://codeply.com/go/lobGxGgfZE

另见: 这个答案，这个答案或改变按钮颜色(CSS 或 SASS)

使用 只能用 CSS也可以改变主颜色，但是它需要很多附加的 CSS，因为有很多 -primary变体(btn-置换主颜色、警报-置换主颜色、 bg-置换主颜色、文本-置换主颜色、表格-置换主颜色、边框-置换主颜色等等。.)其中一些类在边框、悬停和活动状态上有轻微的颜色变化。因此，如果必须使用 CSS，最好使用目标组件，如更改主要按钮颜色。

小开

这是一个非常简单的解决方案。

<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>

用海关代替 bg-dark 类。

在 CSS 中

.bg-custom {
background-color: red;
}

小开

不能更改 cdn 文件中的颜色。
下载引导文件。
搜索 bootstrap.css 文件。
打开这个(bootstrsap.css)文件并搜索“主要”。
把它改成你想要的颜色。

小开

在 Bootstrap 4.x 中使用 SASS 或任何其他颜色(如二次色、成功色等)更改默认主色的正确方法。

创建以下 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";

小开

我创建了这个工具: https://lingtalfi.com/bootstrap4-color-generator, 您只需将主要字段放在第一个字段，然后选择您的颜色，并单击生成。

然后复制生成的 scss 或 css 代码，并将其粘贴到名为 my-color 的文件中。我的颜色。Css (或者任何你想要的名字)。

一旦你的把 css 编译成 css，你可以包括该 CSS 文件之后的引导 CSS，你会很好去。

如果您掌握了其中的要点，那么整个过程大约需要10秒钟，前提是 我的颜色文件已经创建并包含在 head 标记中。

注意: 这个工具可以用来覆盖引导程序的默认颜色(主色、次色、危险色、 ...) ，但是如果需要，也可以创建自定义颜色(蓝色、绿色、三色、 ...)。

注2: 这个工具使用 bootstrap 4(即现在没有任何后续版本)。

小开

这可能是一个有点老的问题，但我想分享最好的方式，我发现定制引导程序。有一个在线工具称为 bootstrap.build 翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳翻译: 奇芳 https://bootstrap.build/app。它工作得很好，没有安装或建设工具安装要求！

小开

鞋带4

这就是对我有效的方法:

我创建了自己的 _custom_theme.scss文件，其内容类似于:

/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);

将它添加到文件 bootstrap.scss的顶部并重新编译(在我的情况下，我把它放在一个名为！)

@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";

小开

鞋带4条规则

这里的大多数答案或多或少是正确的，但是他们都有一些问题(对我来说)。因此，最后，谷歌我找到了正确的程序，如专门的引导文档: https://getbootstrap.com/docs/4.0/getting-started/theming/所述。

假设引导程序安装在 node_modules/bootstrap中。

创建 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...

在同一个文件夹中，创建 _your_variables_theme.scss文件。

按照以下规则自定义 _your_variables_theme.scss文件中的引导程序变量:

根据需要从 _variables.scss复制和粘贴变量, 修改它们的值 并删除! 默认标志 变量已经被赋值了，那么它就不会被重新赋值通过 Bootstrap 中的默认值。

同一 Sass 文件中的变量重写可以在但是，当重写 Sass 文件时, 在导入 Bootstrap 的 Sass 文件 .
之前，必须进行重写

缺省变量在 node_modules/bootstrap/scss/variables.scss中可用。

小开

鞋带5

对于 bootstrap 5，你可以直接进入你的主 css 文件并添加:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;

不管你想做什么改变。

之后别忘了进口引导程序。

您的最终 main.scss 文件应该如下所示:

$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;




@import "~node_modules/bootstrap/scss/bootstrap";

小开

在 Bootstrap v5 alpha 3中，这似乎对我很有用

_ variable-override. scss

$primary: #00adef;


$theme-colors: (
"primary":    $primary,
);

主控制系统

// Overrides
@import "variables-overrides";


// Required - Configuration
@import "@/node_modules/bootstrap/scss/functions";
@import "@/node_modules/bootstrap/scss/variables";
@import "@/node_modules/bootstrap/scss/mixins";
@import "@/node_modules/bootstrap/scss/utilities";


// Optional - Layout & components
@import "@/node_modules/bootstrap/scss/root";
@import "@/node_modules/bootstrap/scss/reboot";
@import "@/node_modules/bootstrap/scss/type";
@import "@/node_modules/bootstrap/scss/images";
@import "@/node_modules/bootstrap/scss/containers";
@import "@/node_modules/bootstrap/scss/grid";
@import "@/node_modules/bootstrap/scss/tables";
@import "@/node_modules/bootstrap/scss/forms";
@import "@/node_modules/bootstrap/scss/buttons";
@import "@/node_modules/bootstrap/scss/transitions";
@import "@/node_modules/bootstrap/scss/dropdown";
@import "@/node_modules/bootstrap/scss/button-group";
@import "@/node_modules/bootstrap/scss/nav";
@import "@/node_modules/bootstrap/scss/navbar";
@import "@/node_modules/bootstrap/scss/card";
@import "@/node_modules/bootstrap/scss/accordion";
@import "@/node_modules/bootstrap/scss/breadcrumb";
@import "@/node_modules/bootstrap/scss/pagination";
@import "@/node_modules/bootstrap/scss/badge";
@import "@/node_modules/bootstrap/scss/alert";
@import "@/node_modules/bootstrap/scss/progress";
@import "@/node_modules/bootstrap/scss/list-group";
@import "@/node_modules/bootstrap/scss/close";
@import "@/node_modules/bootstrap/scss/toasts";
@import "@/node_modules/bootstrap/scss/modal";
@import "@/node_modules/bootstrap/scss/tooltip";
@import "@/node_modules/bootstrap/scss/popover";
@import "@/node_modules/bootstrap/scss/carousel";
@import "@/node_modules/bootstrap/scss/spinners";


// Helpers
@import "@/node_modules/bootstrap/scss/helpers";


// Utilities
@import "@/node_modules/bootstrap/scss/utilities/api";


@import "custom";

小开

引导程序5.2更新

如果您正在使用 SCSS，并且您想要修改颜色，您应该将映射添加到您的 SCSS 文件中。

@import "../../node_modules/bootstrap/scss/functions";
@import "../../node_modules/bootstrap/scss/variables";
@import "../../node_modules/bootstrap/scss/maps"; // MAPS FILE - SINCE 5.2

然后:

$custom-colors: (
"white": $white, // your colours
);
$theme-colors: map-merge($theme-colors, $custom-colors);
$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");
$utilities-colors: map-merge($utilities-colors, $theme-colors-rgb);
$utilities-text-colors: map-loop($utilities-colors, rgba-css-var, "$key", "text");
$utilities-bg-colors: map-loop($utilities-colors, rgba-css-var, "$key", "bg");

最后:

@import "../../node_modules/bootstrap/scss/mixins";
@import "../../node_modules/bootstrap/scss/utilities";

还有其他的。

如何更改引导程序的主颜色？

鞋带4条规则