bootstrap如何更改导航栏颜色

1. 简介

Bootstrap是一个强大的前端开发框架，可以帮助我们快速构建各种响应式网站，其中，导航栏是前端开发中经常需要实现的一个组件，本文将介绍如何利用Bootstrap更改导航栏的颜色。

2. 设置导航栏颜色

2.1 基本用法

在Bootstrap中，可以通过修改navbar的类来更改导航栏的颜色，最简单的方法是通过navbar-light或navbar-dark类来设置导航栏的颜色：

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>
<nav class="navbar navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Navbar</a>
</nav>

其中，navbar-light和navbar-dark分别对应亮色和暗色的导航栏，bg-light和bg-dark设置导航栏的背景色。

2.2 自定义颜色

除了使用预定义的类，我们还可以自定义导航栏的颜色，具体实现方法如下：

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

通过在navbar项目中添加样式属性style，并利用background-color设置背景颜色来自定义导航栏的颜色。

2.3 渐变色导航栏

渐变色导航栏是一个比较常见的设计，能够让用户感到视觉上的美感，Bootstrap提供了一个类为navbar-expand-lg的类，可以通过设置background属性来实现渐变色导航栏：

<nav class="navbar navbar-expand-lg bg-gradient-primary navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

上面这段代码就实现了一个渐变色导航栏，具体效果可以通过打开下面的链接查看：

https://jsfiddle.net/fbpn2Lte/

3. 修改导航栏链接颜色

除了导航栏本身的颜色，Bootstrap还允许我们修改导航栏中链接的颜色。通过navbar-light和navbar-dark类，可以设置导航栏中链接的默认颜色，具体实现方法如下：

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

上面的代码实现了一个默认链接颜色为黑色的导航栏，如果想要修改链接颜色为其他颜色，可以在标签中加入相应的颜色样式类：

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item active">
      <a class="nav-link text-danger" href="#">Home <span class="sr-only">(current)</span></a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-success" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link text-warning" href="#">Pricing</a>
    </li>
  </ul>
  <form class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

https://jsfiddle.net/pL008nxu/

4. 结论

通过以上介绍，我们可以更加灵活地利用Bootstrap修改导航栏的颜色，使得导航栏在网站中更加突出。通过调整导航栏和链接的颜色，我们也可以让网站更加符合自己的设计风格，为用户提供更好的视觉体验。