如何更改引导程序的原色？
如何更改引导程序的原色？
提问于 2016-08-05 22:44:19
是否可以更改引导原色以与品牌颜色相匹配？我在我的例子中使用了bootswatch的纸张主题。
回答 6
Stack Overflow用户
发布于 2016-08-05 22:52:29
有两种方法可以访问
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;并编译结果
Stack Overflow用户
发布于 2017-10-07 01:37:59
任何带有'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文件的更多信息，这里有一个有用的链接：https://bootstrapbay.com/blog/bootstrap-button-styles/。
Stack Overflow用户
发布于 2019-05-22 03:12:50
在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";页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38792005
复制相关文章
相似问题