用 css 更改 Bootstrap 导航栏颜色的教程

这篇文章讲述了在Bootstrap 4中解决以下项目的多种方法：

• 如何改变导航条bootstrap中文本的颜色
• 改变导航条的背景颜色

Bootstrap中的导航条可以按以下方式创建

<nav class="navbar navbar-default" role="navigation"></nav>

默认的背景颜色是白色，颜色是蓝色。在bootstrap中，改变导航的颜色并不那么容易，因为它里面包含品牌、锚链接。

Bootstrap的类是基于LESS的样式，你需要知道导航栏内使用的父类和子类。

默认情况下，导航栏是透明的，这意味着文本颜色与背景颜色是同步的。

Bootstrap为文本颜色提供了两个内置的选择器：

• navbar-light用于将文本颜色从浅色改为深色，而背景颜色只能是浅色。
• navbar-dark它将文本颜色从浅色改为深色，背景颜色为深色。

改变背景颜色

Bootstrap 4.5提供了以下内置的类名，我们可以在导航栏中使用

• bg-primary - 主要颜色
• bg-secondary - 将背景色改为次要色
• bg-success - 改变背景为成功色
• bg-danger - 更新背景为危险色
• bg-warning - 在背景中更新警告的颜色
• bg-info - 在背景中更新信息的颜色
• bg-light - 浅色
• bg-dark - 深色
• bg-white - 背景颜色为白色

所以我们可以使用以下方法来改变导航的颜色

• 自定义css类
• 样式属性
• 内建选择器

下面是一个使用navbar-light/dark和bg-light/dark的例子

 <nav class="navbar navbar-expand-lg  navbar-light bg-light">

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

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

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

  </div>
</nav>
<nav class="navbar navbar-expand-lg  navbar-dark bg-success">

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

  </div>
</nav>
<nav class="navbar navbar-expand-lg  navbar-dark bg-danger">

  <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
    <a class="navbar-brand" href="#">Website</a>
    <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home </a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>

  </div>
</nav>

输出:

内建选择器

我们可以在CSS中覆盖颜色的内置选择器，但是这将影响到其他地方的类名的使用。我们不建议使用覆盖类名。

自定义css类

这是另一种不触及现有CSS选择器的方式，它是改变颜色的干净方式。创建一个CSS类navbar-customclass或你的名字

// custom class for background
.navbar-customclass {
    background-color: blue;
}
/* changing brand text color*/
.navbar-customclass .navbar-brand,
.navbar-customclass .navbar-text {
    color: #ffffff;
}
/* navigation link text color */
.navbar-customclass .navbar-nav .nav-link {
    color: rgba(255,255,255,.6);
}
/* navigation links anchor hover and active styles */
.navbar-customclass .nav-item.active .nav-link,
.navbar-customclass .nav-item:hover .nav-link {
    color: #ffffff;
}