如何更改引导程序原色？

Posted

技术标签:

【中文标题】如何更改引导程序原色？【英文标题】：How to change the bootstrap primary color? 【发布时间】：2016-12-12 00:47:13 【问题描述】：

是否可以更改引导程序原色以匹配品牌颜色？在我的案例中，我使用的是 bootswatch 的纸质主题。

【问题讨论】：

How to change btn color in Bootstrap的可能重复 是的，只需在您的自定义 CSS 文件中覆盖它，但您需要为每个元素及其状态（活动、悬停、焦点等）应用许多不同的规则 我建议不要覆盖 CSS，而是使用自定义工具 getbootstrap.com/customize 【参考方案1】：

引导程序 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。

【讨论】：

@Chris 为什么？ Bootstrap 的 npm 构建脚本包含在源代码中。查看 package.json 文件以获取完整列表。 所以我怀疑使用 CDN 只需要更改 CSS（long -primary 版本）？ 对于我们这些不了解 SASS 的人，在哪里设置 $primary 值并发出导入“bootstrap”；？ 改用@import '~bootstrap/scss/_functions'; 在很多情况下，使用 Laravel，BS5 配置文件被命名为 ...\resources\sass\app.scss【参考方案2】：

有两种方法可以去

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;

并编译结果

【讨论】：

是否有任何可用于 Bootstrap 4 的自定义墨水？ 你 should omit !default 标志除非有其他自定义样式文件让你有理由不这样做。【参考方案3】：

我创建了这个工具：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（即目前没有任何后续版本）。

【讨论】：

我不得不在生成的 CSS 之后移动 boostrap 导入以使其工作。很棒的工具，谢谢。 似乎也适用于 Bootstrap 5 - 至少对我来说...... 令人印象深刻！其他人知道它是否仍然适用于 Bootstrap 5.1？ 我刚用过它，它工作得很好（尽管在这之前我不知道 scss 是什么）！伟大的工作，感谢分享。我也在使用 PyCharm，智能查找完美地显示了新配置的调色板。这是在应用内构建本地化着色的好方法。【参考方案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";

【讨论】：

这是正确的做法，如getbootstrap.com/docs/4.0/getting-started/theming中所述 @rauland 你如何重新编译？在引导程序 3 的情况下是否遵循相同的方法？ 嗨@Umair，我使用Visual Studio 和Mads Kristensen 的扩展Web Compiler。它将 compilerconfig.json 添加到我的解决方案中，我在其中定义如何编译每个 .scss 文件，指定输入 .scss 和输出 .css 文件。更多信息：github.com/madskristensen/WebCompiler 例如：（.Net 核心上的 asp.net）“inputFile”：“wwwroot\\lib\\bootstrap\\scss\\bootstrap.scss”，“outputFile”：“wwwroot\\lib \\bootstrap\\dist\\css\\bootstrap.css"【参考方案5】：

任何带有“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/。

【讨论】：

【参考方案6】：

引导程序 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";

【讨论】：

【参考方案7】：

这可能是一个有点老的问题，但我想分享我发现的自定义引导程序的最佳方法。 有一个名为bootstrap.build https://bootstrap.build/app 的在线工具。它运行良好，无需安装或构建工具设置！

【讨论】：

【参考方案8】：

在 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";

【讨论】：

【参考方案9】：

使用 SaSS 更改品牌颜色

$brand-primary:#some-color;

这将更改所有 UI 的原色。 使用 css- 假设你想改变按钮的原色。所以

btn.primary
  background:#some-color;

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

【讨论】：

【参考方案10】：

引导 4 规则

这里的大多数答案或多或少都是正确的，但它们都存在一些问题（对我而言）。所以，最后，谷歌搜索我找到了正确的过程，如专用引导文档中所述：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 中提供了默认变量。

【讨论】：

【参考方案11】：

这似乎在 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";

【讨论】：

【参考方案12】：

从 Bootstrap 4 开始，您可以通过在 BootstrapColor.net 上下载一个简单的 CSS 文件来easily change the primary color of your Bootstrap。您无需了解 SASS，并且 CSS 文件已准备好用于您的网站。您可以选择所需的颜色，例如蓝色、靛蓝、紫色、粉红色、红色、橙色、黄色、绿色、蓝绿色或青色。

【讨论】：

这些实际上是您可以选择的唯一颜色，因为 bootstrapcolor.net 已经简单地重新编译了 bootstrap，其中硬编码了新的原色。 超级简单的解决方案！【参考方案13】： 您无法更改 cdn 文件中的颜色。 下载引导文件。 搜索 bootstrap.css 文件。 打开这个(bootstrsap.css) 文件并搜索“primary”。 将其更改为您想要的颜色。

【讨论】：

这真的行不通。直接更改 Bootstrap CSS 不是一个好习惯。而是在 bootstrap.css 之后的单独文件中添加 CSS 覆盖。此外，将 all -primary 颜色引用更改为相同颜色将失去边框、悬停、活动等颜色的预期变化，因为它们是主要背景颜色的变体。 @Zim yupp 您的解决方案似乎更通用，谢谢！【参考方案14】：

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

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

将类 bg-dark 替换为 bg-custom。

在 CSS 中

.bg-custom 
  background-color: red;

【讨论】：

这里没有回答问题，请仔细阅读问题。【参考方案15】：

是的， 我建议打开 .css 文件，检查页面并找到要更改的颜色代码，然后查找全部并替换（取决于您的文本编辑器）到您想要的颜色。使用您想要更改的所有颜色进行此操作

【讨论】：

这实际上不是最佳实践。当然它会起作用，但是每当您升级框架时，您的更改都会消失（并且您必须重复该过程每一次。每次您进行升级） - 相反，使用定制工具（@ 987654321@) 或将您的自定义更改添加到单独的 .css 文件（覆盖您要覆盖的类）

以上是关于如何更改引导程序原色？的主要内容，如果未能解决你的问题，请参考以下文章

如何更改 select2 框高度（引导程序）

如何使用引导程序更改导航栏中的过渡动画？

如何使下拉箭头（插入符号图标引导程序）在单击时更改？

如何在引导程序 4 折叠按钮中更改按钮文本

如何在引导程序中更改面板主体背景颜色？

如何使整个表单（输入和提交按钮）在焦点上更改边框颜色（引导程序 3）