是否可以更改引导程序原色以匹配品牌颜色？在我的案例中，我使用的是 bootswatch 的纸质主题。
【问题讨论】：
标签： css twitter-bootstrap twitter-bootstrap-3 bootstrap-4
引导程序 5（2021 年更新）
Bootstrap 5 的方法还是一样的。
https://codeply.com/p/iauLPArGqE
引导程序 4
要在 Bootstrap 4 SASS 中更改 primary 或 任何 主题颜色，请设置适当的变量 before em> 导入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
另请参阅：this answer、this answer 或 changing the button color in (CSS or SASS)
也可以使用 CSS only 更改原色，但它需要大量额外的 CSS，因为有许多 -primary 变体（btn-primary、alert-primary、bg-primary、 text-primary、table-primary、border-primary 等），其中一些类在边框、悬停和活动状态上有轻微的颜色变化。因此，如果您必须使用 CSS，最好使用目标一个组件，例如更改 primary button color。
【讨论】：
@import '~bootstrap/scss/_functions';
有两种方法可以去
http://getbootstrap.com/customize/
并在此调整中更改颜色并下载自定义的引导程序。
或者你可以使用这个版本的 sass 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;
并编译结果
【讨论】：
!default 标志除非有其他自定义样式文件让你有理由不这样做。
我创建了这个工具：https://lingtalfi.com/bootstrap4-color-generator， 您只需将主要放在第一个字段中，然后选择您的颜色，然后单击生成。
然后复制生成的 scss 或 css 代码，并将其粘贴到名为 my-colors.scss 或 my-colors.css（或任何您想要的名称）的文件中。
compile the scss into css 后，您可以在 AFTER 引导 CSS 中包含该 css 文件，然后一切顺利。
如果my-colors.scss文件已经创建并包含在你的head标签中，整个过程大约需要10秒。
注意：此工具可用于覆盖引导程序的默认颜色（主要、次要、危险...），但您也可以根据需要创建自定义颜色（蓝色、绿色、三元...）。
注意 2：此工具适用于 bootstrap 4（即目前没有任何后续版本）。
【讨论】：
引导程序 4
这对我有用：
我创建了自己的_custom_theme.scss 文件，其内容类似于：
/* To simplify I'm only changing the primary color */
$theme-colors: ( "primary":#ffd800);
将它添加到文件 bootstrap.scss 的顶部并重新编译（在我的例子中，我将它放在一个名为 !scss 的文件夹中）
@import "../../../!scss/_custom_theme.scss";
@import "functions";
@import "variables";
@import "mixins";
【讨论】：
任何带有“primary”标签的元素都具有@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>有关使用引导程序自定义 css 文件的更多信息，这是一个有用的链接：https://bootstrapbay.com/blog/bootstrap-button-styles/。
【讨论】：
引导程序 5
对于 bootstrap 5，您只需转到主 scss 文件并添加：
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
或者你想做的任何改变......
并且不要忘记之后立即导入引导程序。
您的最终 main.scss 文件应如下所示：
$primary: #d93eba;
$body-bg: #fff;
$secondary: #8300d9;
@import "~node_modules/bootstrap/scss/bootstrap";
【讨论】：
这可能是一个有点老的问题，但我想分享我发现的自定义引导程序的最佳方法。
有一个名为bootstrap.build https://bootstrap.build/app 的在线工具。它运行良好，无需安装或构建工具设置！
【讨论】：
在 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";
【讨论】：
使用 SaSS
更改品牌颜色
$brand-primary:#some-color;
这将更改所有 UI 的原色。
使用 css-
假设你想改变按钮的原色。所以
btn.primary{
background:#some-color;
}
搜索元素并添加一个新的 css/sass 规则在一个新文件中，并在你加载引导 css 后附加它。
【讨论】：
这里的大多数答案或多或少都是正确的，但它们都存在一些问题（对我而言）。所以，最后，谷歌搜索我找到了正确的过程，如专用引导文档中所述：https://getbootstrap.com/docs/4.0/getting-started/theming/。
假设引导程序安装在node_modules/bootstrap。
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.在同一文件夹中，创建_your_variables_theme.scss 文件。
C.按照以下规则自定义 _your_variables_theme.scss 文件中的引导变量：
根据需要从
_variables.scss复制和粘贴变量， 修改它们的值，并删除 !default 标志。如果一个 变量已经被赋值，那么它不会被重新赋值 使用 Bootstrap 中的默认值。同一个 Sass 文件中的变量覆盖可以在之前或之后 默认变量。但是，在跨 Sass 文件覆盖时， 必须在导入 Bootstrap 的 Sass 文件之前进行覆盖。
node_modules/bootstrap/scss/variables.scss 中提供了默认变量。
【讨论】：
这似乎在 Bootstrap v5 alpha 3 中对我有用
_variables-overrides.scss
$primary: #00adef;
$theme-colors: (
"primary": $primary,
);
main.scss
// 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";
【讨论】：
从 Bootstrap 4 开始，您可以通过在 BootstrapColor.net 上下载一个简单的 CSS 文件来easily change the primary color of your Bootstrap。您无需了解 SASS，并且 CSS 文件已准备好用于您的网站。您可以选择所需的颜色，例如蓝色、靛蓝、紫色、粉红色、红色、橙色、黄色、绿色、蓝绿色或青色。
【讨论】：
【讨论】：
-primary 颜色引用更改为相同颜色将失去边框、悬停、活动等颜色的预期变化，因为它们是主要背景颜色的变体。
这是一个非常简单的解决方案。
<h4 class="card-header bg-dark text-white text-center">Renew your Membership</h4>
将类 bg-dark 替换为 bg-custom。
在 CSS 中
.bg-custom {
background-color: red;
}
【讨论】：
是的， 我建议打开 .css 文件，检查页面并找到要更改的颜色代码，然后查找全部并替换（取决于您的文本编辑器）到您想要的颜色。使用您想要更改的所有颜色进行此操作
【讨论】：