更改Bootstrap NavBar颜色 [英] Changing Bootstrap NavBar Color
问题描述
我试图在bootstrap中更改导航栏颜色，但不成功。导航栏保持不变，就像我从未添加过CSS或自定义样式一样。
我将自定义CSS添加到自定义CSS文件style.css中。以下是style.css文件的全部内容。
您也可以在下面查看我的HTML，它是关于导航栏和样式的index.htm的内容。
注意：我使用位于 http://getbootstrap.com ;不是以前的版本（EX：twitter bootstrap）
style.css
<$ p $自定义样式* /
/ *核心样式* /
body {
font-famliy：Helvetica，sans-衬线;
font-size 14px;
line-height：1.42857143;
颜色：＃333;
}
/ * Navbar样式* /
/ * navbar * /
.navbar-default {
背景颜色：＃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>一个{
颜色：＃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;
背景颜色：＃1495fe;
}
.navbar-default .navbar-nav> .open> a，.navbar-default .navbar-nav> .open> a：hover，.navbar-default .navbar-nav> .open> a：focus {
color：＃ecf0f1;
背景颜色：＃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>一个{
颜色：＃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;
背景颜色：＃1495fe;
}
}
index.htm
index.htm>造型（头像）
<！ - 自定义样式 - >
< link rel =stylesheethref =css / style.css/>
<！ - < link rel =stylesheethref =css / bootstrap.min.css/> - >
< link rel =stylesheethref =css / bootstrap.css/>
< link rel =stylesheethref =css / font-awesome.min.css/>
index.htm > navbar& js（out of head）
<！ - Navbar - >
< nav class =navbar navbar-default>
< div class =container-fluid>
<！ - 品牌和切换分组以获得更好的移动展示效果 - >
< div class =navbar-header>
< button type =buttonclass =navbar-toggle collapseddata-toggle =collapsedata-target =＃bs-example-navbar-collapse-1>
< span class =sr-only>切换导航< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< span class =icon-bar>< / span>
< / button>
< a class =navbar-brandhref =＃>品牌< / a>
< / div>
<！ - 收集导航链接，表单和其他内容以进行切换 - >
< div class =collapse navbar-collapseid =bs-example-navbar-collapse-1>
< ul class =nav navbar-nav>
< li class =active>< a href =＃>连结< span class =sr-only>（current）< / span>< / a> < /锂>
< li>< a href =＃>连结< / a>< / li>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownrole =buttonaria-expanded =false>下拉式< span class =caret> ;< /跨度>< / A>
< ul class =dropdown-menurole =menu>
< li>< a href =＃>动作< / a>< / li>
< li>< a href =＃>另一个动作< / a>< / li>
< li>< a href =＃>其他内容< / a>< / li>
< li class =divider>< / li>
< li>< a href =＃>分离式连结< / a>< / li>
< li class =divider>< / li>
< li>< a href =＃>另一个分离的连结< / a>< / li>
< / ul>
< / li>
< / ul>
< form class =navbar-form navbar-leftrole =search>
< div class =form-group>
< input type =textclass =form-controlplaceholder =Search>
< / div>
< button type =submitclass =btn btn-default>提交< / button>
< / form>
< ul class =nav navbar-nav navbar-right>
< li>< a href =＃>连结< / a>< / li>
< li class =dropdown>
< a href =＃class =dropdown-toggledata-toggle =dropdownrole =buttonaria-expanded =false>下拉式< span class =caret> ;< /跨度>< / A>
< ul class =dropdown-menurole =menu>
< li>< a href =＃>动作< / a>< / li>
< li>< a href =＃>另一个动作< / a>< / li>
< li>< a href =＃>其他内容< / a>< / li>
< li class =divider>< / li>
< li>< a href =＃>分离式连结< / 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>
我找到了发生问题的解决方案。这实际上是一个非常简单的问题。
问题在于，在添加自定义css后，我在HTML中添加了引导CSS。
所以它应该是：
< head>
<！ - 自定义样式 - >
<！ - Bootstrap - >
< link href =css / bootstrap.min.css =stylesheet>
< link rel =stylesheethref =css / style.css/>
< / head>
感谢您的所有帮助。
I was attempting to change the navbar color in bootstrap, but was unsuccessful. The navbar just stays the same as if I never added the CSS or custom styling.
I added the custom CSS into my custom css file, style.css. Below is the entire contents of the style.css file.
You can also view my HTML below, which is the contents of index.htm which regard the navbar and styling.
Note: I'm using bootstrap from the latest version located at http://getbootstrap.com; not previous verisons (EX: 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 > styling (head)
<!-- 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>
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.
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.
这篇关于更改Bootstrap NavBar颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
