引导程序4条规则

Question

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

Answer 1

更新2018年的Bootstrap 4

要更改Bootstrap 4 SASS中的主要或任何主题颜色，请在导入{{1}之前设置相应的变量 }。这允许您的自定义scss覆盖！默认值...

bootstrap.scss

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

在某些情况下，您可能希望从另一个现有 Bootstrap变量设置新颜色。对于这个@import首先是函数和变量，因此它们可以在自定义中引用...

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

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

Also see this answer，或changing the button color in (CSS or SASS)
的答案
也可以使用仅CSS 更改主要颜色，但由于存在许多/* import the necessary Bootstrap files */ @import "bootstrap/functions"; @import "bootstrap/variables"; $theme-colors: ( primary: $purple ); /* finally, import Bootstrap */ @import "bootstrap";个变体（btn-primary，alert-primary，bg-），因此需要大量额外的CSS primary，text-primary，table-primary，border-primary等...）这些类中的一些在边界，悬停和活动状态上有轻微的颜色变化。因此，如果必须使用CSS，最好使用目标一个组件，例如更改primary button color。

Answer 2

有两种方法可以去

http://getbootstrap.com/customize/

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

或者你可以在这个版本https://github.com/twbs/bootstrap-sass中使用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

任何具有＆＃39; primay＆＃39;标签的颜色为@ brand-primary。更改它的一个选项是添加一个自定义的css文件，如下所示：

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

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

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

Answer 5

使用SaSS
改变品牌颜色

$brand-primary:#some-color;

这会改变所有UI的基色。

使用css-
假设您想要更改按钮原色。所以

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

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

Answer 6

这可能是一个古老的问题，但是我想分享我发现的自定义引导程序的最佳方法。有一个名为bootstrap.build https://bootstrap.build/app 的在线工具。效果很好，不需要安装或构建工具！

Answer 7

使用SASS更改Bootstrap 4.x中默认主色的正确方法，或其他任何颜色，例如辅助色，成功色等。

创建以下SASS文件并按照指示导入Bootstrap SASS：

// (Required) Import Bootstrap
@import "bootstrap/functions";
@import "bootstrap/variables";
@import "bootstrap/mixins";

$primary: blue;
$secondary: #222;
$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 8

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

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

包含此文件 AFTER 之后，您就可以使用了。

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

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

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

Answer 9

引导程序4条规则

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

Answer 10

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

Answer 11

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

_variables-overrides.scss

       val1         val2
0  reg, sgs  dsggs, sgsg
1   gsg, 34      sdg, 23

main.scss

$primary: #00adef;

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

Answer 12

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

Answer 13

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

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

使用 bg-custom 替换bg-dark类。

在CSS中

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

Answer 14

您无法更改CDN文件中的颜色。
下载引导文件。
搜索bootstrap.css文件。
打开此（bootstrsap.css）文件并搜索'primary'。
将其更改为所需的颜色。

Answer 15

是，我建议打开.css文件，检查页面并查找要更改的颜色代码，并查找所有和替换（取决于您的文本编辑器）到您想要的颜色。用你想要改变的所有颜色做到这一点

如何更改bootstrap主色？

15 个答案:

引导程序4条规则