如何在推特引导程序中将默认背景颜色白色更改为其他颜色

Question

我正在构建一个Web应用程序，其中我使用css将默认颜色设置为海军蓝。但是当我在我的页面中添加 Twitter bootstrap css 时，我没有找到我的海军蓝色，而是找到了 Twitter 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

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

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

Answer 4

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

Answer 5

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

body { background: #000000 !important;}

就是这样

Answer 6

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

<!-- Bootstrap CDN -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<!-- Your styles -->
<link rel='stylesheet' href='styles/my_bootsrap_editions.css'>

Answer 7

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

body{
    background: navy;
}

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

Answer 8

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

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

Answer 9

不

建议覆盖引导程序文件，只需以本地样式.css使用

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

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

Answer 10

如何使用类更改 HTML 和 CSS 中的背景颜色

例：

在你写的 HTML 上

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

在 CSS 上

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

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