Bootstrap 4更改Hamburger切换颜色

小编典典

Bootstrap 4更改Hamburger切换颜色

css

我有一个引导网站，当屏幕尺寸小于992px时，会添加Hamburger切换器。代码如下：

<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>

可以更改汉堡切换按钮的颜色吗？

阅读 753

2020-05-16

共1个答案

小编典典

navbar-toggler-iconBootstrap 4中的（汉堡包）使用SVG background- image。切换器图标图像有2个“版本”。一个用于浅色导航栏，另一个用于深色导航栏…

使用navbar-dark了较深的背景光/白色toggler
使用navbar-light上较亮的背景黑色/灰色toggler

// 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）。注意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");
}

.custom-toggler.navbar-toggler {
  border-color: rgb(255,102,203);
}

演示

OFC，仅使用另一个库中的图标的另一种选择，例如：Font Awesome等。

更新Bootstrap 4.0.0：

从Bootstrap 4 Beta开始，navbar-inverse现在navbar-dark可在具有较深背景颜色的导航栏上使用，以产生较亮的链接和切换器颜色。

2020-05-16