CSS 如何在 twitter bootstrap 中将默认背景颜色白色更改为其他颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10768891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to change the default background color white to something else in twitter bootstrap
提问by SM Farhad Ali
I am building a web application where I have set my default color to navy blue using css. But when i added the twitter bootstrap css's in my page I did not find my navy blue color instead I found the white background color provided by twitter bootstrap.
我正在构建一个 Web 应用程序，其中使用 css 将默认颜色设置为海军蓝。但是，当我在页面中添加 twitter bootstrap css 时，我没有找到我的海军蓝色，而是找到了 twitter bootstrap 提供的白色背景色。
My query is that what portion of css should I change in bootstrap to change my page's background.
我的查询是我应该在引导程序中更改 css 的哪个部分来更改我的页面背景。
回答by Jako
You can overwrite Bootstraps default CSS by adding your own rules.
您可以通过添加自己的规则来覆盖 Bootstraps 默认 CSS。
<style type="text/css">
body { background: navy !important; } /* Adding !important forces the browser to overwrite the default style applied by Bootstrap */
</style>
回答by Theo
I would not recommend changing the actual bootstrap CSS files. If you do not want to use Jako's first solution you can create a custom bootstrap style sheet with one of the available Bootstrap theme generator (Bootstrap theme generators). That way you can use 1 style sheet with all of the default Bootstrap CSS with just the one change to it that you want. With a Bootstrap theme generator you do not need to write any CSS. You only need to set the hex values for the color you want for the body (Scaffolding; bodyBackground).
我不建议更改实际的引导 CSS 文件。如果您不想使用 Jako 的第一个解决方案，您可以使用其中一个可用的 Bootstrap 主题生成器 ( Bootstrap 主题生成器)创建自定义引导程序样式表。这样你就可以使用 1 个样式表和所有默认的 Bootstrap CSS，只需对它进行一个你想要的更改。使用 Bootstrap 主题生成器，您无需编写任何 CSS。您只需要为身体所需的颜色设置十六进制值（脚手架；bodyBackground）。
回答by Richie
You have to override the bootstrap default by being a bit more specific. Try this for a black background:
您必须通过更具体一点来覆盖引导程序默认值。试试这个黑色背景：
html body {
background-color: rgba(0,0,0,1.00);
}
回答by user3209457
You can simply add this line into your bootstrap_and_overides.css.less file
您可以简单地将此行添加到 bootstrap_and_overides.css.less 文件中
body { background: #000000 !important;}
that's it
就是这样
回答by CarMoreno
I'm using cdn boostrap, the solution that I found was: First include the cdn bootstrap, then you include the file .css where you are editing the default styles of bootstrap.
我正在使用 cdn boostrap，我找到的解决方案是：首先包含 cdn bootstrap，然后包含文件 .css，您可以在其中编辑引导程序的默认样式。
回答by Zoltan Peller
Bootstrap 4 provides standard methods for this, fully described here: https://getbootstrap.com/docs/4.3/getting-started/theming
Bootstrap 4 为此提供了标准方法，这里有完整的描述：https: //getbootstrap.com/docs/4.3/getting-started/theming
Eg. you can override defaults simply by setting variables in the SASS file, where you import bootstrap. An example from the docs (which also answers the question):
例如。您可以简单地通过在导入引导程序的 SASS 文件中设置变量来覆盖默认值。文档中的一个例子（也回答了这个问题）：
// Your variable overrides
$body-bg: #000;
$body-color: #111;
// Bootstrap and its default variables
@import "../node_modules/bootstrap/scss/bootstrap";
回答by abhishek kumar
Add your own .css file & put in it:
添加您自己的 .css 文件并放入其中：
body{
background: navy;
}
Important:While including css files in html, first include the cdn bootstrap css, then only include your own .css file. This way stylings in your own css file overrides the default behaviour from bootstrap css.
重要提示：在 html 中包含 css 文件时，首先包含 cdn bootstrap css，然后只包含您自己的 .css 文件。这样，您自己的 css 文件中的样式会覆盖 bootstrap css 中的默认行为。
回答by Esther
The colors changed due to the order of CSS files.
颜色因 CSS 文件的顺序而改变。
Place the custom CSS under the bootstrap CSS.
将自定义 CSS 放在引导 CSS 下。
回答by karunesh
Its not recommended to overwrite bootstrap file, just in your local style.css use
不建议覆盖 bootstrap 文件，只在你本地的 style.css 中使用
body{background: your color !important;
身体{背景：你的颜色！重要；
here !importantdeclaration overwrite bootstrap value.
这里!important声明覆盖引导值。
回答by N. Syawali. A
how to change background color in html & css with class
如何使用类更改 html 和 css 中的背景颜色
example:
例子：
on html you write
在你写的 html 上
<div class="pad_menu">
</div>
on css
在 CSS 上
.pad_menu {
padding: 100px;
background-color: #A9FFCB;
}
so your background will be change to Magic Mint, if you want to know the code of the color, i suggest you visit https://coolors.co. Hope this useful :)
所以你的背景会变成魔法薄荷，如果你想知道颜色的代码，我建议你访问https://coolors.co。希望这有用:)
