40

我正在构建一个 Web 应用程序，其中我使用 css 将我的默认颜色设置为深蓝色。但是当我在我的页面中添加 twitter bootstrap css 时，我没有找到我的海军蓝色，而是找到了 twitter bootstrap 提供的白色背景颜色。

我的问题是我应该在引导程序中更改 css 的哪个部分来更改页面的背景。

4

10 回答 10

64

您可以通过添加自己的规则来覆盖 Bootstraps 默认 CSS。

<style type="text/css">
   body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
于 2012-05-26T20:26:49.803 回答
18

Bootstrap 4为此提供了标准方法，在此处进行了全面描述：https ://getbootstrap.com/docs/4.3/getting-started/theming

例如。您可以通过在导入引导程序的 SASS 文件中设置变量来覆盖默认值。文档中的一个例子（也回答了这个问题）：

// Your variable overrides
$body-bg: #000;
$body-color: #111;

// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
于 2019-07-27T20:31:26.963 回答
15

您必须通过更具体一点来覆盖引导程序默认值。试试这个黑色背景：

html body {
    background-color: rgba(0,0,0,1.00);

}
于 2015-09-13T21:28:19.570 回答
12

我不建议更改实际的引导 CSS 文件。如果您不想使用 Jako 的第一个解决方案，您可以使用可用的 Bootstrap 主题生成器（Bootstrap 主题生成器）创建自定义引导样式表。这样，您可以使用 1 个样式表和所有默认的 Bootstrap CSS，只需对它进行一次您想要的更改。使用 Bootstrap 主题生成器，您无需编写任何 CSS。您只需为您想要的身体颜色设置十六进制值（脚手架；bodyBackground）。

于 2013-03-05T07:47:23.280 回答
6

您可以简单地将这一行添加到您的 bootstrap_and_overides.css.less 文件中

body { background: #000000 !important;}

就是这样

于 2014-02-22T15:24:05.620 回答
5

我正在使用cdn boostrap，我找到的解决方案是：首先包含引导程序的cdn，然后（就在下方）包含.css您正在编辑引导程序默认样式的文件。

于 2015-01-29T18:52:56.353 回答
3

添加您自己的 .css 文件并放入其中：

body{
    background: navy;
}

重要提示： 在 html 中包含 css 文件时，首先包含 cdn bootstrap css，然后仅包含您​​自己的 .css 文件。这样，您自己的 css 文件中的样式会覆盖引导 css 的默认行为。

于 2016-07-17T18:17:26.523 回答
1

不建议覆盖引导文件，只需在本地 style.css 中使用

身体{背景：你的颜色！重要；

这里！重要声明覆盖引导值。

于 2016-10-11T07:29:06.290 回答
1

颜色因 CSS 文件的顺序而改变。

将自定义 CSS 放在引导 CSS 下。

于 2020-01-01T10:36:15.690 回答
0

如何使用类更改 html 和 css 中的背景颜色

例子：

在你写的 html 上

<div class="pad_menu">
</div>

在 CSS 上

.pad_menu {
   padding: 100px;
   background-color: #A9FFCB;
}

所以你的背景会变成魔法薄荷，如果你想知道颜色的代码，我建议你访问https://coolors.co。希望这有用:)

于 2017-11-05T11:00:31.730 回答