ash*_*ram 57 css twitter-bootstrap twitter-bootstrap-3 bootstrap-4
是否可以更改引导原色以匹配品牌颜色？在我的案例中,我使用的是bootswatch的纸质主题.
Zim*_*Zim 52
更新2018年的Bootstrap 4
要更改Bootstrap 4 SASS中的主要颜色或任何主题颜色,请在导入之前设置相应的变量bootstrap.scss.这允许您的自定义scss覆盖!默认值...
$primary: purple;
$danger: red;
@import "bootstrap";
演示:https://www.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://www.codeply.com/go/lobGxGgfZE
也可以仅使用CSS更改主要颜色,但它需要大量额外的CSS,因为有许多-primary变体(btn-primary,alert-primary,bg-primary,text-primary,table-primary,border-primary等...)这些类中的一些在边界,悬停和活动状态上有轻微的颜色变化.因此,如果必须使用CSS,最好使用目标一个组件,例如更改主按钮颜色.
gio*_*aud 22
有两种方法可以去
http://getbootstrap.com/customize/
并更改此调整中的颜色并下载自定义的引导程序.
或者您可以使用此版本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;
并编译结果
use*_*972 14
引导程序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";
lin*_*ing 10
我已经创建了这个工具：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一起使用的（即，暂时没有任何后续版本）。
引导程序 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";
任何带有'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/.
这可能是一个有点老的问题，但我想分享我发现的自定义引导程序的最佳方式。有一个名为bootstrap.build https://bootstrap.build/app的在线工具。它运行良好，无需安装或构建工具设置！