Bootstrap 4 导航栏颜色

Posted 2023-03-06

【中文标题】Bootstrap 4 导航栏颜色

【英文标题】：Bootstrap 4 navbar color

【发布时间】：2017-09-08 22:42:27

【问题描述】：

在 Bootstrap 4 中，如何更改导航栏的背景颜色？ twbscolor 的代码不起作用。我想让背景颜色变成不同的颜色，字体颜色变成白色。

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
    </button>
    <a class="navbar-brand" href="#">Jordan Baron</a>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
            </li>
        </ul>
    </div>
</nav>

【问题讨论】：

我认为您缺少navbar-dark，正如某些答案中所建议的那样。 ***.com/a/47900899/2797254

的快速代码 sn-p

【参考方案1】：

引导程序 5（2021 年更新）

在样式方面，Bootstrap 5 中的 Navbar 没有太大变化。因此，更改/覆盖颜色和样式与 Bootstrap 4 类似。要自定义支持的 Navbar 内容样式...

/* change the background color */
.navbar-custom 
    background-color: #4433cc;


/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text 
    color: #ffcc00;


/* change the link color */
.navbar-custom .navbar-nav .nav-link 
    color: #ffbb00;


/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link 
    color: pink;

如果有您想要自定义的导航栏下拉菜单...

/* for dropdowns only */
.navbar-custom .navbar-nav .dropdown-menu 
    background-color: #ddaa11;


/* dropdown item text color */
.navbar-custom .navbar-nav .dropdown-item 
    color: #000000;


/* dropdown item hover or focus */
.navbar-custom .navbar-nav .dropdown-item:hover,
.navbar-custom .navbar-nav .dropdown-item:focus 
    color: #eeeeee;
    background-color: red;

---

Bootstrap 4.x（2019 年更新）

请记住，您定义的任何 CSS 覆盖必须具有相同的 CSS 特异性或更高，才能正确覆盖 Bootstrap 的 CSS。

导航栏默认为透明。如果您仅想更改背景颜色，只需将颜色应用于<navbar class="bg-custom"> 即可完成，但请记住，不会更改其他颜色，例如链接、悬停和下拉菜单菜单颜色。

这里的 CSS 将改变 Bootstrap 4 中任何相关的导航栏颜色...

/* change the background color */
.navbar-custom 
    background-color: #ff5500;

/* change the brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text 
    color: rgba(255,255,255,.8);

/* change the link color */
.navbar-custom .navbar-nav .nav-link 
    color: rgba(255,255,255,.5);

/* change the color of active or hovered links */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .nav-item:hover .nav-link 
    color: #ffffff;

演示：http://www.codeply.com/go/U9I2byZ3tS

---

覆盖导航栏浅色或深色

如果您使用 Bootstrap 4 Navbar navbar-light 或 navbar-dark 类，请在覆盖中使用它。例如，更改导航栏链接颜色...

.navbar-light .nav-item.active .nav-link,
.navbar-light .nav-item:focus .nav-link,
.navbar-light .nav-item:hover .nav-link 
        color: #ffffff;

---

在进行任何 Bootstrap 自定义时，您需要了解 CSS 特异性。自定义 CSS 中的覆盖需要使用与 bootstrap.css 一样具体的选择器。 Read more

---

透明导航栏

请注意，Bootstrap 4（和 5）导航栏默认是透明的。使用navbar-dark 用于深色/粗体背景颜色，如果导航栏颜色较浅，请使用navbar-light。这将影响文本的颜色和color of the toggler icon as explained here。

相关：https://***.com/a/18530995/171456

【讨论】：

谢谢您，先生。我不知道我需要 CSS 特定性来覆盖 Bootstrap 类。

【参考方案2】：

2021 年更新 - 适用于 Bootstrap v5 和 v4

这是更改导航栏背景颜色的更简单的方法。

只需使用.navbar-dark 而不是.navbar-light 并添加您的自定义背景颜色类，例如.bg-company-red

.navbar-dark 将使您的所有链接变白。

html

<nav class="navbar navbar-dark bg-company-red">

CSS 样式...

.bg-company-red 
    background-color: darkred !important;

请参阅以下文档链接以了解您的版本：

Bootstrap v5 Navbar color schemes Bootstrap v4 Navbar color schemes

【讨论】：

嗨！我正在为所有外部 css 文件使用 webpack。一旦我尝试覆盖 Bootstrap 4 中的样式，我必须使用 !important 规则，否则它们不会被应用。 v4 中的定制机制是否发生了变化？使用 v3 我没有这样的问题

您可能只需要在 CSS 选择器中更加具体，这样您就不需要使用 !important。所以不要尝试.special-class，而是尝试body > header > .special-class。复制 Bootstrap 正在使用的选择器，然后确保在引导样式之后包含您的覆盖样式。

感谢您的建议！我尝试了很多组合，但只有important! 改变了属性。很奇怪的情况……

好吧，这是我的错：我有 .bg-dark 已经有 !important 规则的类。删除它解决了问题

使用 !important 是一种不好的做法。更多稍后或特定规则。

【参考方案3】：

我明白了。这很简单。使用 bg 类可以轻松实现。

让我告诉你：

<nav class="navbar navbar-expand-lg navbar-dark navbar-full bg-primary"></nav>

这会给你默认的蓝色navbar

如果你想改变你喜欢的颜色，那么只需使用nav中的样式标签：

<nav class="navbar navbar-expand-lg navbar-dark navbar-full" style="background-color: #FF0000">

【讨论】：

虽然这在技术上可能有效，但它不是在 Bootstrap 中执行此操作的方法，并且会导致可访问性问题。

【参考方案4】：

你可以像这样在 background-color 属性值前面写 !important 它会改变链接的颜色。

.nav-link 
    color: white !important;

【讨论】：

这不是一个好主意。使用 !important 不是一个好习惯，也没有必要。

【参考方案5】：

更改navbar背景颜色：

.navbar-custom 

    background-color: yourcolor !important;

【参考方案6】：

如果您阅读 bootstrap 4 文档 Color schemes，它将回答您的问题。

【参考方案7】：

<nav class="navbar navbar-toggleable-md navbar-light bg-danger">

所以你这里有这段代码，你一定知道bg-danger 给出了某种颜色。 现在，如果您想为页面添加一些自定义颜色，只需将 bg-danger 更改为 bg-color。 然后要么创建一个单独的 css 文件，要么您可以在同一 tag 中使用 style 元素进行锻炼。 就这样做-

`<nav class="navbar navbar-toggleable-md navbar-light bg-color" style="background-color: cyan;">` . 

这样就可以了。

【参考方案8】：

您可以使用“！important”来获取您的自定义颜色

.navbar 
 background-color: yourcolor !important;
 

【讨论】：

在可以使用特异性时使用 !important 不是一个好习惯

是的，你是对的，我们可以为该元素添加类。