Html 如何更改 Bootstrap 切换导航颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24080462/
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
How to change Bootstrap toggle navigation color?
提问by user3691280
From what I see this is the code for the toggle-navigation button:
从我看来，这是切换导航按钮的代码：
<button id="nav-toggle-button" type="button" class="navbar-toggle" 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>
I added id="nav-toggle-button" and gave it this CSS:
我添加了 id="nav-toggle-button" 并给了它这个 CSS：
#nav-toggle-button {
color: gray;
}
but nothing has changed. I tried adding !important as well, without success and I don't know what else to try. Anybody knows?
但一切都没有改变。我也尝试添加 !important ，但没有成功，我不知道还能尝试什么。有人知道吗？
EDIT: Here's a fiddle with a solution suggested by Prashant123 (sorry, not enough reputation to vote up your answer!): http://jsfiddle.net/LuKSB/1/it's way better already, but it would be perfect if the horizontal lines inside the button would be visible (white). I guess it would be changing the color, but it doesn't work.
编辑：这里有一个由 Prashant123 建议的解决方案的小提琴（抱歉，没有足够的声誉来投票给你的答案！）：http: //jsfiddle.net/LuKSB/1/它已经更好了，但如果水平按钮内的线条是可见的（白色）。我想它会改变颜色，但它不起作用。
回答by Zim
Changes for Bootstrap 4
Bootstrap 4 的变化
The navbar-toggler-iconin Bootstrap 4 uses an SVG background-image. There are 2 versions of the toggler icon image. One for a light navbar, and one for a dark (inverse) navbar...
所述navbar-toggler-icon自举4使用的SVG background-image。切换器图标图像有 2 个版本。一个用于浅色导航栏，一个用于深色（反向）导航栏......
// this is a black icon with 50% opacity
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml;..");
}
// this is a white icon with 50% opacity
.navbar-inverse .navbar-toggler-icon {
background-image: url("data:image/svg+xml;..");
}
If you want to change the color of this image to something else, you can customize the icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke='rgba(255,102,203, 0.5)'value in the SVG data..
如果您想将此图像的颜色更改为其他颜色，您可以自定义图标。例如，这里我将 RGB 值设置为粉红色 (255,102,203)。注意stroke='rgba(255,102,203, 0.5)'SVG 数据中的值。
.custom-toggler .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='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
回答by Prashant
try this DEMOhtml
试试这个DEMO html
<button id="nav-toggle-button" type="button" class="navbar-toggle" 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>
css
css
#nav-toggle-button{
background-color:red;
}
回答by timSully
Adding on to Prashant's example you can target the span's color specifically by changing the CSS input to:
添加到 Prashant 的示例中，您可以通过将 CSS 输入更改为：
#nav-toggle-button span {
background-color: black;
}
回答by Alex C.
Like @zim I add this in css changing the stroke color rgba:
像@zim一样，我在css中添加了这个改变笔触颜色rgba：
.navbar-light button.navbar-toggler.collapsed 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='rgba(108, 99, 255, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
This is the color when 'collapsed', if you want add a color when the hamburger is not collapsed, first, in the button, you need to add a class 'collapsed', because this class is added only after the first clic, and then, in the css style file, you need to add the same code with differend stroke color without the class collapsed like this:
这是'collapsed'时的颜色，如果要在汉堡包未折叠时添加颜色，首先，在按钮中，您需要添加一个'collapsed'类，因为这个类是在第一次点击后才添加的，并且然后，在 css 样式文件中，您需要添加具有不同笔触颜色的相同代码，而不像这样折叠类：
.navbar-light button.navbar-toggler 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='rgba(253, 92, 99, 1)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
