如何更改自举原色？

97

是否可以更改引导原色以匹配品牌颜色？我正在使用bootswatch的纸张主题。

css  twitter-bootstrap  twitter-bootstrap-3  bootstrap-4 
— Ashishjmeshram
source
1
— TylerH，2016年
是的，只需在自定义CSS文件中覆盖它即可，但是您需要为每个元素及其状态（活动，悬停，焦点等）应用许多不同的规则
— Lee Lee
3
我建议不要使用自定义工具getbootstrap.com/customize
— blurfus

Answers:

100

Bootstrap 4的2020更新

要更改主，或任何所述的主题颜色在自举4 SASS，设置适当的变量之前导入bootstrap.scss。这使您的自定义scss可以覆盖！default值...

$primary: purple;
$danger: red;

@import "bootstrap";

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

在某些情况下，您可能想从另一个现有的Bootstrap变量设置新的颜色。为此，首先导入函数和变量，以便可以在定制中引用它们。

/* 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来更改原色，但由于存在许多-primary变化（btn-primary，alert-primary，bg-primary，text-primary，table-primary，border-primary等），还需要大量其他CSS。...），其中一些类别的边框，悬停和活动状态的颜色略有不同。因此，如果必须使用CSS，则最好使用目标一个组件，例如更改主按钮color。

这些解决方案也适用于Bootstrap 5 alpha

— 齐姆
source
对于像我一样对SASS和scss陌生的人，请签出npm，gulp以完成编译步骤。
— 克里斯·康兰
2
@克里斯为什么？随附Bootstrap的npm构建脚本。在package.json文件中查找完整列表。
— 约翰E
1
不是前端开发人员。我的主题文档告诉了我。如果没有任何意义，我将删除。
— 克里斯·康兰
因此，我怀疑使用CDN仅需要更改CSS（长主版本）？
— Erik Philips
对于我们这些不懂SASS的人来说，在哪里设置$ primary值并发出import“ bootstrap” ;？
— 史蒂芬·弗兰克
29

有两种方法可以去 

http://getbootstrap.com/customize/

并在此调整中更改颜色并下载自定义的引导程序。

或者，您可以将sass与该版本https://github.com/twbs/bootstrap-sass一起使用，并导入您的sass资产/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;

并编译结果

— 豪尔赫·路易斯·萨德·罗萨尔
source
5
Bootstrap 4是否提供任何自定义墨水？
— Er 阿米特·乔希（Amit Joshi）
1
您应该忽略的!default，除非有其他自定义样式文件给你一个理由不标志。
— 约翰E
17

我已经创建了这个工具：https : //lingtalfi.com/bootstrap4-color-generator，您只需在第一个字段中输入primary，然后选择颜色，然后单击Generate。

然后复制生成的scss或css代码，并将其粘贴到名为my-colors.scss或my-colors.css（或任何您想要的名称）的文件中。

一旦你编译SCSS到CSS，你可以包括CSS文件后引导CSS，你会好到哪里去。

如果您已经掌握了要点，则整个过程大约需要10秒钟，前提是my-colors.scss文件已经创建并包含在head标签中。

注意：此工具可用于覆盖引导程序的默认颜色（主要，次要，危险等），但如果需要，您也可以创建自定义颜色（蓝色，绿色，三进制等）。

注意2：该工具是与bootstrap 4一起使用的（即，暂时没有任何后续版本）。

— ling
source
在生成此CSS之后，我不得不移动boostrap导入才能使其正常工作。很棒的工具，谢谢。
— deanwilliammills19年
6

任何带有“ 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>
展开摘要

有关带有引导程序的自定义css文件的更多信息，请访问以下链接：https : //bootstrapbay.com/blog/bootstrap-button-styles/。

— 奥西尔（N. Osil）
source
6

引导程序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";
— 劳兰
source
2
— Gianpiero
@rauland您如何重新编译？引导程序3是否采用相同的方法？
— Umair
1
@Umair，您好，我将Visual Studio与Mads Kristensen的扩展名Web Compiler一起使用。它在我的解决方案中添加了一个configure.config文件，其中我定义了如何编译每个.scss文件，并指定了输入.scss和输出.css文件。更多信息：github.com/madskristensen/WebCompiler
— Rauland
1
例如：（。NET核心上的asp.net）“ inputFile”：“ wwwroot \\ lib \\ bootstrap \\ scss \\ bootstrap.scss”，“ outputFile”：“ wwwroot \\ lib \\ bootstrap \\ dist \\ css \\ bootstrap.css“
— Rauland
2

使用SASS更改Bootstrap 4.x中默认默认原色的正确方法，或使用其他任何颜色（例如第二色，成功色等）。

创建以下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";
— 阿尔文·康达（Alvin Konda）
source
1

使用SaSS
更改品牌颜色

$brand-primary:#some-color;

这将更改所有UI的原色。

使用CSS-
假设您想更改按钮的原色。

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

搜索元素，并在新文件中添加新的CSS / SASS规则，并在您加载引导CSS之后将其附加。

— Manish库马尔
source
0

Bootstrap 4规则

这里的大多数答案或多或少是正确的，但所有答案都存在某些问题（对我而言）。因此，最后，通过Google搜索，我找到了正确的过程，如专用的引导文档所述：https : //getbootstrap.com/docs/4.0/getting-started/theming/。

假设bootstrap已安装在中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。

— 詹皮耶罗
source
0

自举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";
— 用户名
source
0

这似乎在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";
— 艾伦·T
source
-3

从Bootstrap 4开始，您可以通过在BootstrapColor.net上下载一个简单的CSS文件轻松更改Bootstrap的原色。您无需了解SASS，CSS文件即可用于您的网站。您可以选择所需的颜色，例如蓝色，靛蓝，紫色，粉红色，红色，橙色，黄色，绿色，蓝绿色或青色。

— 亚历克斯01
source
2
实际上，这些是您可以选择的唯一颜色，因为bootstrapcolor.net只是使用硬编码的新原色重新编译了bootstrap。–
— Quantum7
超级简单的解决方案！
— massimoi
-7
  • 您无法更改CDN文件中的颜色。
  • 下载引导文件。
  • 搜索bootstrap.css文件。
  • 打开这个（bootstrsap.css）文件并搜索'primary'。
  • 将其更改为所需的颜色。
— 苏拉夫
source
1
这真的行不通。直接更改Bootstrap CSS并不是一个好习惯。而是在bootstrap.css之后的单独文件中添加CSS覆盖。此外，更改所有的的-primary，因为他们的主要背景颜色的变化颜色引用相同的颜色就会失去边界，悬停，活动等。颜色的预期变化。
— Zim
@Zim yupp您的解决方案似乎更加通用化！
— Sourav
-8

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

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

用bg-custom替换类bg-dark 。

在CSS中

.bg-custom {
  background-color: red;
}
— 抢
source
2
这不能回答问题，请仔细阅读问题。
— Munim Munna
-14

是的，我建议您打开.css文件，检查页面并找到要更改的颜色代码，然后将“查找全部并替换”（取决于文本编辑器）更改为所需的颜色。使用您要更改的所有颜色来做到这一点

— 乔纳斯·西达拉维奇（JonasSideravičius）
source
3
这实际上不是最佳实践。当然它会工作，但每当你升级的框架，您的更改会消失（和你不得不重复这个过程，每一次。你做一个升级） -相反，使用定制工具（getbootstrap.com/customize）或加入您的自定义更改为单独的.css文件（覆盖您要覆盖的类）
— blurfus
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.