如何改变bootstrap原色？

Question

是否可以更改 bootstrap 原色以匹配品牌颜色？在我的案例中，我使用的是 bootswatch 的论文主题。

Answer 1

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

Answer 2

您可以通过两种方式前往

并在此调整中更改颜色并下载 bootstrap 自定义。

或者您可以将 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;

并编译结果

Answer 3

使用SaSS
更改品牌颜色

$brand-primary:#some-color;

这将更改所有 UI 的主要颜色。

使用 css-
假设您想更改按钮主 color.So

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

搜索元素并添加新的 css/sass 在新文件中规则并在加载 bootstrap css.

后附加它

Answer 4

任何带有 '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>

有关使用 bootstrap 自定义 css 文件的更多信息，这里有一个有用的 link：https://bootstrapbay.com/blog/bootstrap-button-styles/。

Answer 5

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

Answer 6

Bootstrap 5（2021 年更新）

方法还是一样Bootstrap 5.

https://codeply.com/p/iauLPArGqE

Bootstrap 4

更改主要，或[=63]中主题颜色的任何 =] 4 SASS，在导入 bootstrap.scss 之前设置适当的变量 。这允许您的自定义 scss 覆盖 !default 值...

$primary: purple; $danger: red; @import "bootstrap";

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

在某些情况下，您可能希望根据另一个现有 Bootstrap 变量设置新颜色。对于这个 @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 or

也可以只用 CSS 来改变原色 但它需要很多额外的 CSS 因为有很多 -primary 变体（btn-primary、alert-primary、bg-primary、text-primary、table-primary、border-primary 等...）其中一些类在边框、悬停和活动状态。因此，如果您必须使用 CSS，最好使用目标组件，例如更改 .

Answer 7

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

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

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

在CSS

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

Answer 8

您不能更改cdn 文件中的颜色。
下载 bootstrap 文件。
搜索 bootstrap.css 文件。
打开这个 (bootstrsap.css) 文件并搜索 'primary'。
将其更改为您想要的颜色。

Answer 9

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

Answer 10

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

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

一旦 compile the scss into css，您可以在 bootstrap CSS 之后包含该 css 文件，然后您将很好去。

只要my-colors.scss文件已经创建好，整个过程大概需要10秒左右包含在您的头部标签中。

注意：此工具可用于覆盖 bootstrap 的默认颜色（主要、次要、危险...），但您也可以根据需要创建自定义颜色（蓝色、绿色、三元, ...).

注意 2：此工具适用于 bootstrap 4（即目前不是任何后续版本）。

Answer 11

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

Answer 12

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

Answer 13

Bootstrap 4 条规则

这里的大部分答案都或多或少是正确的，但它们都有一些问题（对我来说）。所以，最后，谷歌搜索我找到了正确的程序，如专用 bootstrap 文档中所述：https://getbootstrap.com/docs/4.0/getting-started/theming/.

假设 bootstrap 安装在 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 文件中的 bootstrap 变量：

Copy and paste variables from _variables.scss as 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.

默认变量在 node_modules/bootstrap/scss/variables.scss 中可用。

Answer 14

Bootstrap 5

对于 bootstrap 5，您可以转到主 scss 文件并添加：

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

或者您想进行的任何更改...

并且不要忘记在之后导入 bootstrap。

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

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


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

Answer 15

这似乎适用于 Bootstrap v5 alpha 3

_变量-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";

Answer 16

有多种自定义方式Bootstrap。您的最佳路径可能取决于您的项目、构建工具的复杂性、您使用的 Bootstrap 版本、浏览器支持等等。

know more

Bootstrap 的 CSS 自定义属性用于快速 forward-looking 设计和开发。

body {
  font: 1rem/1.5 var(--bs-font-sans-serif);
}
a {
  color: var(--bs-blue);
}

Sass 个文件以利用变量、映射、mixin 和函数来帮助您更快地构建和自定义您的项目。

// Include any default variable overrides here (though functions won't be available)
// Default variable overrides
$primary: blue;
$body-bg: #000;
$body-color: #111;

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

// Then add additional custom code here

Answer 17

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

以及其他。

如何改变bootstrap原色？

How to change the bootstrap primary color?

css

twitter-bootstrap

twitter-bootstrap-3

bootstrap-4

Bootstrap 4 条规则

Bootstrap 的 CSS 自定义属性用于快速 forward-looking 设计和开发。

Sass 个文件以利用变量、映射、mixin 和函数来帮助您更快地构建和自定义您的项目。