twitter-bootstrap 更改 Bootstrap NavBar 颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28522555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing Bootstrap NavBar color
提问by Imperial Knight
I was attempting to change the navbar color in Bootstrap, but it was unsuccessful. The navbar just stays the same as if I never added the CSS or custom styling.
我试图在 Bootstrap 中更改导航栏颜色，但没有成功。导航栏保持不变，就好像我从未添加过 CSS 或自定义样式一样。
I added the custom CSS into my custom CSS file, style.css. Below is the entire contents of the style.cssfile.
我将自定义 CSS 添加到我的自定义 CSS 文件中style.css。下面是style.css文件的全部内容。
You can also view my HTML below, which is the contents of index.htmwhich regard the navbar and styling.
您还可以在下面查看我的 HTML，这是index.htm关于导航栏和样式的内容。
Note: I'm using bootstrap from the latest version located at http://getbootstrap.com; not previous versions (Example: Twitter Bootstrap)
注意：我使用的是位于http://getbootstrap.com的最新版本的引导程序；不是以前的版本（例如：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
索引.htm
index.htm > styling (head)
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)
index.htm > 导航栏和 js（头脑风暴）
<!-- 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>
回答by Lorem Ipsum Dolor
Bootstrap NavBar Generatoris what you need. It is a little bit tricky when you use the CSS generated.
Bootstrap NavBar Generator正是您所需要的。当您使用生成的 CSS 时，这有点棘手。
In case you find that after you insert the generated stylesheet the NavBar does not change at all.
如果您发现在插入生成的样式表后 NavBar 根本没有改变。
Please including the following was what made it possible to change the navbar color:
请包括以下内容，使更改导航栏颜色成为可能：
.navbar{
background-image: none;
}
Hope this is helpful. :D
希望这是有帮助的。:D
回答by Imperial Knight
I found the solution to the issue that was occurring. It was quite a simple issue actually.
我找到了正在发生的问题的解决方案。其实这是一个很简单的问题。
The issue was that I was adding the bootstrap CSS in the HTML after the custom css was added.
问题是我在添加自定义 css 后在 HTML 中添加了引导 CSS。
So it should've been:
所以应该是：
<head>
<!-- Custom Styling -->
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
</head>
Thanks for all the help.
感谢所有的帮助。
回答by to240
As of Bootstrap 4 you can easily change the colour of a navbar background with the 'bg' class. A few examples are below:
从 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>
It is a basic navbar which expands on larger devices, collapses on smaller ones, and sticks to the top of the page. The "bg-white" element changes the background colour of the navbar from the default grey colour to white. A few more examples are:
它是一个基本的导航栏，可在较大的设备上展开，在较小的设备上折叠，并固定在页面顶部。“bg-white”元素将导航栏的背景颜色从默认的灰色更改为白色。再举几个例子：
bg-primary
bg-secondary
bg-success
bg-danger
bg-warning
bg-info
bg-light
bg-dark
bg-white
