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可在具有较深背景颜色的导航栏上使用,以产生较亮的链接和切换器颜色。



