Bootstrap 4 折叠的导航栏背景颜色 [英] Bootstrap 4 collapsed navbar background color
问题描述
我想在 bootstrap 4 alpha v6 中更改折叠导航栏的背景颜色.当然我想改变整个导航栏的背景颜色.
所以问题是任何负责导航栏折叠的类?到目前为止我发现的唯一 div 是 #navbarSupportedContent 但它只是导航栏中 ul 的内容(因此它不会改变整个导航栏的颜色).如果导航栏折叠，我可以在 jquery 中检查然后更改背景颜色，但我想知道我是否可以简单地在 css 中完成.
除此之外，我想说导航栏的默认颜色是透明的，这就是为什么我想在折叠时更改它的颜色.
<小时>我还有下一个问题，BS4 中负责导航栏切换图标的类是什么?我问是因为我想更改图标的颜色.我已经找到并尝试了以下内容:
.navbar-toggler-icon {颜色:白色！重要；}也适用于 v4.
这是一个 Bootstrap 4 alpha6 CSS 演练，涵盖了 .navbar 本身的修改、内部链接和汉堡按钮(都避免了 !important仅用作最后的替代手段):
/* 更改导航栏背景 */导航栏{背景:透明；}/* 更改导航栏品牌颜色 */.navbar a.navbar-brand {白颜色;}/* 在悬停时更改导航栏品牌颜色 */.navbar a.navbar-brand:hover {颜色:绿色；}/* 更改导航栏 li 颜色，也是激活的一种但未禁用的一种 */.navbar ul.navbar-nav li.nav-item a.nav-link {白颜色;}/* 更改导航栏切换器内的线条颜色(笔触)*/.navbar-light span.navbar-toggler-icon {background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpathstroke='yellow'stroke-width='2'stroke-linecap='round'stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");白颜色;}/* 更改汉堡按钮边框颜色 */button.navbar-toggler.navbar-toggler-right {边框颜色:黄色；}/* 在折叠时更改导航栏背景 */@media(最大宽度:768px){导航栏{背景:浅灰色；}}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="样式表"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"完整性="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkizqE+jo0ynG"crossing"></脚本><nav class="navbar navbar-toggleable-md navbar-light"><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><a class="navbar-brand" href="#">Navbar</a><div class="collapse navbar-collapse" id="navbarTogglerDemo02"><ul class="navbar-nav mr-auto mt-2 mt-md-0"><li class="nav-item active"><a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a><li class="nav-item"><a class="nav-link" href="#">Link</a><li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a><form class="form-inline my-2 my-lg-0"><input class="form-control mr-sm-2" type="text" placeholder="Search"><button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button></表单></nav>
I want to change background color of collapsed navbar in bootstrap 4 alpha v6. Of course I want to change the background color of whole navbar.
So the question is any class responsible for navbar collapsing? The only div I found so far is #navbarSupportedContent but it's only the content of ul in navbar (so it does not change the color of whole navbar). I can check in jquery if the navbar is collapsed then change the background color, but I would like to know if I can do it simply in css.
In addition to that I would like to say that the navbar default color is transparent, that's why I want to change it's color when it's collapsed.
I have also next question what's the class responsible for navbar toggler icon in BS4? I'm asking because I would like to change the color of the icon. I've already found and tried the following:
.navbar-toggler-icon {
color:white !important;
}
Works on v4 as well.
Here's a Bootstrap 4 alpha6 CSS walkthrough covering modifications of .navbar itself, inside links and hamburger button (all avoiding !important which should be used only as last override resort):
/* change navbar background */
nav.navbar {
background: transparent;
}
/* change navbar-brand color */
.navbar a.navbar-brand {
color: white;
}
/* change navbar-brand color on hover */
.navbar a.navbar-brand:hover {
color: green;
}
/* change navbar li colors, also active one but not disabled one */
.navbar ul.navbar-nav li.nav-item a.nav-link {
color: white;
}
/* change navbar-toggler inside lines color (stroke) */
.navbar-light span.navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='yellow' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
color: white;
}
/* change hamburger button border color */
button.navbar-toggler.navbar-toggler-right {
border-color: yellow;
}
/* change navbar background on collapse */
@media (max-width: 768px) {
nav.navbar {
background: lightgray;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<nav class="navbar navbar-toggleable-md navbar-light">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav mr-auto mt-2 mt-md-0">
<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="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
这篇关于Bootstrap 4 折叠的导航栏背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
