CSS Bootstrap 4 更改汉堡切换器颜色

Question

提问by Rehan

I have a bootstrap website where the hamburger toggler is added when the screen size is less than 992px. The code is like so:

我有一个引导程序网站，当屏幕尺寸小于 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>

Is there any possibility to change the color of the hamburger toggler button?

有没有可能改变汉堡切换按钮的颜色？

Answer 1

回答by Zim

The navbar-toggler-icon(hamburger) in Bootstrap 4 uses an SVG background-image. There are 2 "versions" of the toggler icon image. One for a light navbar, and one for a dark navbar...

navbar-toggler-iconBootstrap 4 中的(hamburger) 使用 SVG background-image。切换器图标图像有 2 个“版本”。一种用于浅色导航栏，一种用于深色导航栏...

Use navbar-darkfor a light/white toggler on darker backgrounds
Use navbar-lightfor a dark/gray toggler on lighter backgrounds

使用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;..");
}

Therefore, if you want to change the color of the toggler image to something else, you can customize the icon. For example, here I set the RGB value to pink (255,102,203). Notice the stroke='rgba(255,102,203, 0.5)'value in the SVG data:

因此，如果您想将切换器图像的颜色更改为其他颜色，您可以自定义图标。例如，这里我将 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);
}

Demohttp://www.codeply.com/go/4FdZGlPMNV

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

OFC, another option to just use an icon from another library ie: Font Awesome, etc..

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

Update Bootstrap 4.0.0:

更新引导程序 4.0.0：

As of Bootstrap 4 Beta, navbar-inverseis now navbar-darkto use on navbars with darker background colors to produce lighter link and toggler colors.

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

How to change Bootstrap 4 Navbar colors

如何更改 Bootstrap 4 导航栏颜色

Answer 2

回答by Amirreza Mohammadi

Use a font-awesome iconas the default icon of your navbar.

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

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

Or try this on old font-awesome versions:

或者在旧的字体真棒版本上试试这个：

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

Answer 3

回答by Thái An Nguy?n

just insert class navbar-darkor navbar-lightin the nav element:

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

<nav class="navbar navbar-dark navbar-expand-md">
    <button class="navbar-toggler">
        <span class="navbar-toggler-icon"></span>
    </button>
</nav>

Answer 4

回答by Ghafor Sabury

You can create the toggler button with css only in a very easy way, there is no need to use any fonts in SVG or ... foramt.

您可以使用 css 以非常简单的方式创建切换按钮，无需在 SVG 或 ... foramt 中使用任何字体。

Your Button:

你的按钮：

<button 
     class="navbar-toggler collapsed" 
    data-target="#navbarsExampleDefault" 
    data-toggle="collapse">
        <span class="line"></span> 
        <span class="line"></span> 
        <span class="line"></span>
</button>

Your Button Style:

您的按钮样式：

.navbar-toggler{
width: 47px;
height: 34px;
background-color: #7eb444;

}

Your horizontal line Style:

您的水平线样式：

.navbar-toggler .line{
width: 100%;
float: left;
height: 2px;
background-color: #fff;
margin-bottom: 5px;

}

Demo

演示

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

Answer 5

回答by stockersky

EDIT : my bad! With my answer, the icon won't behave as a togglerActually, it will be shown even when not collapsed... Still searching...

编辑：我的错！根据我的回答，该图标不会像切换器一样工作实际上，即使未折叠它也会显示...仍在搜索...

This would work :

这会起作用：

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

The trick proposed by my answer is to replace the navbar-togglerwith a classical button class btnand then, as answered earlier, use an icon font.

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

Note, that if you keep <button class="navbar-toggler">, the button will have a "strange" shape.

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

As stated in this post on github, bootstrap uses some "css trickery", so users don't have to rely on fonts.

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

So, just don't use the "navbar-toggler"class on your button if you want to use an icon font.

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

Cheers.

干杯。

Answer 6

回答by Eyu

If you downloaded bootstrap, go to bootstrap-4.4.1-dist/css/bootstrap.min

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

i. find the .navbar-light .navbar-toggler-iconor the .navbar-dark .navbar-toggler-iconselector

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

ii. select the background-image attribute and its value. The snippet looks like this:

ii. 选择 background-image 属性及其值。代码片段如下所示：

.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. copy the snippet and paste it in your custom CSS

三、复制代码片段并将其粘贴到您的自定义 CSS 中

iv. change the stroke='rgba(0,0,0,0.5)'value to your preferred rgba value

四、将stroke='rgba(0,0,0,0.5)'值更改为您首选的 rgba 值

Answer 7

回答by Prateek Gupta

Easiest way is replace this default bootstrap code:

最简单的方法是替换这个默认的引导代码：

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

by this :

这样：

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

And don't forget to add this code also to your file:

并且不要忘记将此代码也添加到您的文件中：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Hope it helps!!

希望能帮助到你！！

Answer 8

回答by nedeco

If you work with sass version of bootstrap in _variables.scssyou can find $navbar-inverse-toggler-bgor $navbar-light-toggler-bgwhere you can change the color and style of your toggle button.

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

In html you have to use navbar-inverseor navbar-lightdepending on which version you want to use.

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

Answer 9

回答by Igor Parra

As alternative you always can try a simpler workaround, using another icon, for example:

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

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

ref: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

参考：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>

ref: https://www.w3schools.com/icons/bootstrap_icons_glyphicons.asp

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

So you gain total control over their color and size:

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

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

(the button's style applied is just for a quick test):

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

Answer 10

回答by Henry

I just developed a considerably easier solution. (Yes, I know this is an old question but someone researching this same issue may find this useful.)

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

I was using an SVG called hamburger.svg. I looked at it with a text editor and couldn't find anything that was setting a colour for the three lines - I'm guessing it defaults to black because that's certainly the behaviour I get - so I simply added a "stroke" parameter to the definition of the SVG. That didn't QUITE work - the borders of the three lines were my chosen colour (white) but the rest of the line was still black so I added a "fill" parameter as well. And that did the trick!

我正在使用一个名为 hamburger.svg 的 SVG。我用文本编辑器查看了它，但找不到任何为三行设置颜色的东西——我猜它默认为黑色，因为这肯定是我得到的行为——所以我只是添加了一个“中风”参数到SVG 的定义。这并没有完全奏效——三行的边界是我选择的颜色（白色），但行的其余部分仍然是黑色，所以我也添加了一个“填充”参数。这就是诀窍！

Here is the code for the original hamburger.svg in its entirety:

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

And here is the code for the new SVG after I edited it and saved it as hamburger_white.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>

As you can see if you scroll way over to the right, all I did was add:

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

stroke="white" fill="white"

to the very end of the path. The other thing I had to do was change the file name of the hamburger in the HTML. No messing with the CSS at all and no need to track down another icon.

到路径的尽头。我必须做的另一件事是更改 HTML 中汉堡包的文件名。根本不需要弄乱 CSS，也不需要追踪另一个图标。

Easy-peasey! You can imitate this to make your hamburger any colour you like.

轻松！你可以模仿这个把你的汉堡包做成你喜欢的任何颜色。

CSS Bootstrap 4 更改汉堡切换器颜色

提问by Rehan

回答by Zim

回答by Amirreza Mohammadi

回答by Thái An Nguy?n

回答by Ghafor Sabury

回答by stockersky

回答by Eyu

回答by Prateek Gupta

回答by nedeco

回答by Igor Parra

回答by Henry

相关推荐

最近更新

标签

CSS Bootstrap 4 更改汉堡切换器颜色

提问by Rehan

回答by Zim

回答by Amirreza Mohammadi

回答by Thái An Nguy?n

回答by Ghafor Sabury

回答by stockersky

回答by Eyu

回答by Prateek Gupta

回答by nedeco

回答by Igor Parra

回答by Henry

相关推荐

从左到右的 CSS 动画

CSS Bootstrap 4：如何在容器中使用全宽导航栏（如 SO 导航栏）？

如何使用另一种样式扩展 css 类？

CSS Bootstrap 4，如何将按钮居中对齐？

相关推荐

最近更新

标签