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

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

Answer 3

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

Answer 4

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

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

}

Answer 5

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

body { background: #000000 !important;}

而已

Answer 6

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

Answer 7

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

body{
    background: navy;
}

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