更改Bootstrap NavBar颜色

Question

我试图改变Bootstrap中的导航栏颜色，但是没有成功。导航栏保持不变，就像我从未添加过CSS或自定义样式一样。

我将自定义CSS添加到我的自定义CSS文件style.css中。以下是style.css文件的全部内容。

您还可以在下面查看我的HTML，这是关于导航栏和样式的index.htm的内容。

注意：我使用的是位于http://getbootstrap.com的最新版本的bootstrap;不是以前的版本（例如：Twitter Bootstrap）

style.css文件

/* Custom Styling */

/* Core Styling */

body {
    font-famliy: Helvetica, sans-serif;
    font-size 14px;
    line-height: 1.42857143;
    color: #333;
}


/* Navbar Styling */

/* navbar */

.navbar-default {
  background-color: #14a3ff;
  border-color: #1495fe;
}
.navbar-default .navbar-brand {
  color: #ecf0f1;
}
.navbar-default .navbar-brand:hover, .navbar-default .navbar-brand:focus {
  color: #ecf0f1;
}
.navbar-default .navbar-text {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus {
  color: #ecf0f1;
}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
  color: #ecf0f1;
  background-color: #1495fe;
}
.navbar-default .navbar-nav > .open > a, .navbar-default .navbar-nav > .open > a:hover, .navbar-default .navbar-nav > .open > a:focus {
  color: #ecf0f1;
  background-color: #1495fe;
}
.navbar-default .navbar-toggle {
  border-color: #1495fe;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
  background-color: #1495fe;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ecf0f1;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ecf0f1;
}
.navbar-default .navbar-link {
  color: #ecf0f1;
}
.navbar-default .navbar-link:hover {
  color: #ecf0f1;
}

@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ecf0f1;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ecf0f1;
    background-color: #1495fe;
  }
}

index.htm的

index.htm>造型（头部）

<!-- Custom Styling -->
<link rel="stylesheet" href="css/style.css" />
<!-- <link rel="stylesheet" href="css/bootstrap.min.css" /> -->
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/font-awesome.min.css" />

index.htm> navbar＆js（out of head）

<!-- Navbar -->
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Brand</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
                <li class="divider"></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
          <form class="navbar-form navbar-left" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
          </form>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>

Answer 1

我找到了正在发生的问题的解决方案。实际上这是一个非常简单的问题。

问题是我在添加自定义css后在HTML中添加了bootstrap CSS。

所以它应该是：

<head>

    <!-- Custom Styling -->
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css" />

</head>

谢谢你的帮助。

Answer 2

Bootstrap NavBar Generator是你需要的。使用生成的CSS时有点棘手。

如果您在插入生成的样式表后发现导航栏根本没有更改。

请包括以下内容，以便更改导航栏颜色：

.navbar{ 
    background-image: none;
}

希望这是有帮助的。 ：d

Answer 3

从Bootstrap 4开始，您可以使用'bg'类轻松更改导航栏背景的颜色。下面是一些例子：

<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top">
<a class="navbar-brand" href="#">
<div class="collapse navbar-collapse">
<img src="#" alt="Logo" style="width:300px;">
</a>
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
</ul>
</nav>

它是一个基本的导航栏，可以扩展到更大的设备，在较小的设备上折叠，并粘在页面的顶部。 “bg-white”元素将导航栏的背景颜色从默认的灰色更改为白色。还有一些例子：

bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white