Bootstrap 4更改汉堡包切换颜色

124

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

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

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

css  twitter-bootstrap  bootstrap-4 
— 雷汉
source
2
代码无法像在bootply中那样运行
— Jordan.JD
不是一个真正的答案，但你可以玩弄在导航栏，toggler图标advertentiekracht.nl/togglerIcon.html有自举toggler图标被用作一个外部的样式元素，而不是指引导样式表。还说明了如何进行管理。
— Ben Thijssen

Answers:

245

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);
}

演示 http://www.codeply.com/go/4FdZGlPMNV

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

更新Bootstrap 4.0.0：

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

如何更改Bootstrap 4导航栏颜色

— 齐姆
source
2
在Bootstrap 4 beta 1中没有.navbar-inverse类。您可以从两个类别中选择：.navbar-light或.navbar-dark。
— Qrzysio
53

使用真棒字体图标作为导航栏的默认图标。

<span class="navbar-toggler-icon">   
    <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i>
</span>

或者在字体超赞的旧版本上尝试以下操作：

<span class="navbar-toggler-icon">   
    <i class="fa fa-navicon" style="color:#fff; font-size:28px;"></i>
</span>
— 阿米尔（Amirreza Mohammadi）
source
3
对于fontawesome 5，请使用栏。fontawesome.com/icons/bars?style=solid
— Murtaza Bhurgri，
最好的主意。
— Shiva Manhar '19
7

您可以仅通过一种非常简单的方法用CSS创建切换按钮，而无需在SVG或... foramt中使用任何字体。

您的按钮：

<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-toggler{
    width: 47px;
    height: 34px;
    background-color: #7eb444;
    border:none;
}
.navbar-toggler .line{
    width: 100%;
    float: left;
    height: 2px;
    background-color: #fff;
    margin-bottom: 5px;
}
<button class="navbar-toggler" data-target="#navbarsExampleDefault" data-toggle="collapse" aria-expanded="true" >
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line" style="margin-bottom: 0;"></span>
</button>
展开摘要

— 加福·萨伯里（Ghafor Sabury）
source
5

只需插入类navbar-dark或navbar-light在nav元素中：

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>
— 塔安·阮
source
4

最简单的方法是替换以下默认引导程序代码：

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

希望能帮助到你！！

— 普拉泰克·古普塔（Prateek Gupta）
source
3

如果您下载了引导程序，请转到bootstrap-4.4.1-dist / css / bootstrap.min

一世。找到.navbar-light .navbar-toggler-icon或.navbar-dark .navbar-toggler-icon选择器

ii。选择背景图像属性及其值。该代码段如下所示：

.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");
}
展开摘要

iii。复制代码段并将其粘贴到自定义CSS中

iv。将stroke=’rgba(0,0,0,0.5)’值更改为您的首选rgba值

— Eyoab
source
2

编辑：我不好！根据我的回答，该图标将不会充当切换器 实际上，即使未折叠也将显示 ...仍在搜索...

这将工作：

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

我的答案提出的窍门是navbar-toggler用经典的按钮类替换btn，然后如前所述，使用图标字体。

请注意，如果保留<button class="navbar-toggler">，则按钮将具有“奇怪”的形状。

如github上的这篇文章所述，bootstrap使用了一些“ css欺骗”，因此用户不必依赖字体。

因此，"navbar-toggler"如果要使用图标字体，请不要使用按钮上的类。

干杯。

— Stockersky
source
仅当您使用不属于Bootstrap的Font Awesome时，这才“有效”
— Zim
我想您需要在列表中删除对Amirreza Mohammadi给出的答案的评论。谢谢。
— NoChance
2

我刚刚开发了一个相当简单的解决方案。（是的，我知道这是一个老问题，但是研究相同问题的人可能会发现这很有用。）

我正在使用一个名为hamburger.svg的SVG。我用文本编辑器查看了它，却找不到任何为这三行设置颜色的东西-我猜它默认为黑色，因为这肯定是我得到的行为-所以我只是向其中添加了“笔画”参数SVG的定义。那不是很有效-三行的边框是我选择的颜色（白色），但是其余行仍然是黑色，因此我也添加了一个“填充”参数。那就成功了！

这是原始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>

这是我编辑新的SVG并将其保存为hamburger_white.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" stroke="white" fill="white"/></svg>

如您所见，如果您向右滚动，我所做的就是添加： 

stroke="white" fill="white"

到这条路的尽头。我要做的另一件事是在HTML中更改汉堡包的文件名。完全不会弄乱CSS，也无需跟踪另一个图标。

轻松说！您可以模仿它使您的汉堡包任何您喜欢的颜色。

— 亨利
source
1

如果您使用的是Sass版本的bootstrap，则_variables.scss可以在其中找到$navbar-inverse-toggler-bg或$navbar-light-toggler-bg更改切换按钮的颜色和样式。

在html中，您必须使用navbar-inverse或navbar-light取决于要使用的版本。

— 内德科
source
关于navbar-light在bootstrap 4中不起作用
— botbot '18
1

作为替代方案，您始终可以尝试使用另一个图标来尝试更简单的解决方法，例如： 

<button type="button" style="background:none;border:none">
    <span class="fa fa-reorder"></span>
</button>

参考：https : //www.w3schools.com/icons/fontawesome_icons_webapp.asp 

<button type="button" style="background:none;border:none">
    <span class="glyphicon glyphicon-align-justify"></span>
</button>

参考：https : //www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

因此，您可以完全控制它们的颜色和大小：

button span {
    /*overwriting*/
    color: white;
    font-size: 25px;
}

在此处输入图片说明

（应用的按钮样式仅用于快速测试）：

— 伊戈尔·帕拉（Igor Parra）
source
1

默认引导导航栏图标

<span class="navbar-toggler-icon"></span>

添加字体真棒图标并删除 class="navbar-toggler-icon"

<span> <i class="fas fa-bars" style="color:#fff; font-size:28px;"></i> </span>

— 拉纳博士
source
0

检查自定义汉堡导航的最佳解决方案。

@import "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css";
.bg-iconnav {
  background: #f0323d;
  /* Old browsers */
  background: -moz-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #f0323d 0%, #e6366c 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #f0323d 0%, #e6366c 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f0323d', endColorstr='#e6366c', GradientType=0);
  /* IE6-9 */
  border-radius: 0;
  padding: 10px;
}

.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,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
<button class="navbar-toggler bg-iconnav" type="button">
<span class="navbar-toggler-icon"></span>
</button>
展开摘要

演示图片

— 哈比布拉汗
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.