栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

Bootstrap 4更改Hamburger切换颜色

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Bootstrap 4更改Hamburger切换颜色

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



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/465040.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号