Bootstrap 4更改汉堡包切换颜色 [英] Bootstrap 4 Change Hamburger Toggler Color
问题描述
我有一个bootstrap网站,当屏幕尺寸小于992px时,添加了汉堡包切换器.代码是这样的:
I have a bootstrap website where the hamburger toggler is added when the screen size is less than 992px. The code is like so:
<button class="navbar-toggler navbar-toggler-right"
type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
是否可以更改汉堡切换按钮的颜色?
Is there any possibility to change the color of the hamburger toggler button?
推荐答案
Bootstrap 4中的navbar-toggler-icon
(汉堡包)使用SVG background-image
.切换器图标图像有2个版本".一个用于浅色导航栏,另一个用于深色导航栏...
The navbar-toggler-icon
(hamburger) in 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 navbar...
- 在较暗的背景上将
navbar-dark
用于浅/白色切换器 - 在浅色背景上使用
navbar-light
作为深/灰色切换器
- Use
navbar-dark
for a light/white toggler on darker backgrounds - Use
navbar-light
for a dark/gray toggler on lighter backgrounds
// 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-dark .navbar-toggler-icon {
background-image: url("data:image/svg+xml;..");
}
因此,如果要将切换器图像的颜色更改为其他颜色,可以自定义图标.例如,在这里我将RGB值设置为粉红色(255,102,203).注意SVG数据中的stroke='rgba(255,102,203, 0.5)'
值:
Therefore, if you want to change the color of the toggler 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:
.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");
}
.custom-toggler.navbar-toggler {
border-color: rgb(255,102,203);
}
演示 http://www.codeply.com/go/4FdZGlPMNV
OFC,另一种选择是仅使用另一个库中的图标,例如:Font Awesome等.
OFC, another option to just use an icon from another library ie: Font Awesome, etc..
更新Bootstrap 4.0.0:
从Bootstrap 4 Beta开始,navbar-inverse
现在是navbar-dark
,可用于具有较深背景颜色的导航栏上,以产生较亮的链接和切换器颜色.
As of Bootstrap 4 Beta, navbar-inverse
is now navbar-dark
to use on navbars with darker background colors to produce lighter link and toggler colors.
这篇关于Bootstrap 4更改汉堡包切换颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!