Question

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

我的疑问是我应该在bootstrap中更改css的哪个部分以更改页面的背景。

Answer 1

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

<style type="text/css">
   body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>

Answer 2

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

Answer 3

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

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

}

Answer 4

您只需将此行添加到bootstrap_and_overides.css.less文件

即可

body { background: #000000 !important;}

就是这样

Answer 5

使用cdn bootstrap，我找到的解决方案是：首先包括cdn bootstrap，然后你包含文件.css，你正在编辑默认的bootstrap样式。

Answer 6

添加您自己的.css文件＆amp;放进去：

重要：在html中包含css文件时，首先要包含cdn bootstrap css，然后只包含你自己的.css文件。这样，您自己的css文件中的样式将覆盖bootstrap css的默认行为。

Answer 7

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

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

Answer 8

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

body {background：您的颜色！important ;

此处！important 声明覆盖bootstrap值。

Answer 9

如何更改html＆amp;中的背景颜色css with class

示例：

在你写的HTML上

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

on css

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

所以你的背景将改为Magic Mint，如果你想知道颜色的代码，我建议你访问https://coolors.co。希望这有用：）

Answer 10

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

如何在twitter bootstrap中将默认背景颜色白色更改为其他颜色

10 个答案: