Css Bootstrap 4更改汉堡切换器颜色
我有一个bootstrap网站,当屏幕大小小于992px时会添加汉堡切换器。代码是这样的:Css Bootstrap 4更改汉堡切换器颜色,css,twitter-bootstrap,bootstrap-4,Css,Twitter Bootstrap,Bootstrap 4,我有一个bootstrap网站,当屏幕大小小于992px时会添加汉堡切换器。代码是这样的: <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
<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>
是否有可能更改汉堡包切换按钮的颜色?引导程序4中的
导航栏切换按钮图标(汉堡包)使用SVG背景图像。有两个“版本”的切换图标图像。一个用于浅导航栏,一个用于暗导航栏
- 在较暗的背景上使用
navbar-dark
进行亮/白切换
- 使用
navbar light
在较亮的背景上进行暗/灰色切换
因此,如果要将切换器图像的颜色更改为其他颜色,可以自定义图标。例如,这里我将RGB值设置为粉红色(255102203)。请注意SVG数据中的stroke='rgba(255102203,0.5)
值:
.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,另一个只使用另一个库中图标的选项,即:字体真棒,等等
更新Bootstrap 4.0.0:
自Bootstrap 4 Beta版起,navbar Reverse
现在是navbar dark
,用于背景颜色较深的navbar,以产生较亮的链接和切换颜色
如果您在\u variables.scss
中使用sass版本的引导,您可以在$navbar inverse toggler bg
或$navbar light toggler bg
中更改切换按钮的颜色和样式
在html中,您必须使用导航栏反转
或导航栏灯光
,具体取决于您要使用的版本。作为替代方案,您可以尝试更简单的解决方法,使用另一个图标,例如:
<button type="button" style="background:none;border:none">
<span class="fa fa-reorder"></span>
</button>
(应用的按钮样式仅用于快速测试):使用a作为导航栏的默认图标
或者在旧的字体版本上尝试此功能:
<span class="navbar-toggler-icon">
<i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
编辑:我的坏!根据我的回答,图标不会表现为一个切换开关
事实上,即使没有倒塌,它也会显示出来。。。
还在搜索
这将有助于:
<button class="btn btn-primary" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation">
<span>
<i class="fas fa-bars"></i>
</span>
</button>
我的回答提出的技巧是用一个经典的按钮类btn
替换navbar切换器
,然后,正如前面回答的那样,使用图标字体
请注意,如果保持
,按钮将具有“奇怪”的形状
如本文所述,bootstrap使用了一些“css技巧”,因此用户不必依赖字体
因此,如果您想使用图标字体,请不要在按钮上使用“navbar toggler”
类
干杯。只需在导航元素中插入classnavbar-dark
或navbar-light
:
<nav class="navbar navbar-dark navbar-expand-md">
<button class="navbar-toggler">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
您只需以非常简单的方式使用css创建切换按钮,无需在SVG或。。。福拉姆特
您的按钮:
<button
class="navbar-toggler collapsed"
data-target="#navbarsExampleDefault"
data-toggle="collapse">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;
.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;
}
您的水平线样式:
<button
class="navbar-toggler collapsed"
data-target="#navbarsExampleDefault"
data-toggle="collapse">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</button>
.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;
.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;
}
演示
.navbar切换器{
宽度:47px;
高度:34px;
背景色:#7eb444;
边界:无;
}
.导航栏切换器.线路{
宽度:100%;
浮动:左;
高度:2倍;
背景色:#fff;
边缘底部:5px;
}
检查定制汉堡导航的最佳解决方案
@import”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg iconnav{
背景:#f032d;
/*旧浏览器*/
背景:-moz线性梯度(顶部,#f0323d 0%,#e6366c 100%);
/*FF3.6-15*/
背景:-webkit线性梯度(顶部,#f0323d 0%,#e6366c 100%);
/*铬10-25,Safari5.1-6*/
背景:线性梯度(至底部,#f0323d 0%,#e6366c 100%);
/*W3C、IE10+、FF16+、Chrome26+、Opera12+、Safari7+*/
过滤器:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f0323d',endColorstr='#e6366c',GradientType=0);
/*IE6-9*/
边界半径:0;
填充:10px;
}
.navbar切换图标{
背景图像:url(“数据:image/svg+xml;charset=utf8,%3Csvg viewBox='0 32'xmlns='0http://www.w3.org/2000/svg“%3E%3Cpath stroke='rgba(255255255,1)'stroke width='2'stroke linecap='round'stroke miterlimit='10'd='M4 8H224M4 16h24M4 24h24'/%3E%3C/svg%3E”);
}
我刚刚开发了一个相当简单的解决方案。(是的,我知道这是一个老问题,但研究同一问题的人可能会发现这很有用。)
我使用了一个名为hamburger.SVG的SVG。我用文本编辑器查看了它,没有找到任何设置三行颜色的东西——我猜它默认为黑色,因为这肯定是我得到的行为——所以我只是在SVG的定义中添加了一个“stroke”参数。这不太管用——三条线的边框是我选择的颜色(白色),但线的其余部分仍然是黑色,所以我也添加了一个“填充”参数。这就成功了
以下是原始hamburger.svg的完整代码:
<?xml version="1.0" ?><!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="32px" id="Layer_1" style="enable-background:new 0 0 32 32;" version="1.1" viewBox="0 0 32 32" width="32px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/></svg>
走到路的尽头。我必须做的另一件事是在HTML中更改汉堡的文件名。根本不需要搞乱CSS,也不需要追踪另一个图标
放松点!你可以模仿它来做你喜欢的任何颜色的汉堡包 默认引导导航栏图标
添加Font-Awesome图标并删除class=“navbar-toggler-Icon”
如果您下载了引导,请转到bootstrap-4.4.1-dist/css/bootstrap.min.css
找到.navbar light.navbar toggler图标
或.navbar dark.navbar toggler图标
选择器
选择背景图像
属性及其值。该代码段如下所示:
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
复制代码段并将其粘贴到自定义CSS中
stroke="white" fill="white"
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
<button class="navbar-toggler" 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>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="" role="button" ><i class="fa fa-bars" aria-hidden="true" style="color:#e6e6ff"></i></span>
</button>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
/* the class you gave of the bars icon ↑ */
.iconClass{
display: none;
}
/* the bootstrap toogler button class */
.navbar-toggler{
display: none;
}
}