引导程序4更改汉堡Toggler颜色

我有一个引导程序网站，其中Hamburger是在屏幕小于992px时添加的。汉堡代码是像这样引导程序4更改汉堡Toggler颜色

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

是否有可能改变汉堡包按钮的颜色？

来源

2017-03-03 Rehan

代码不是运行在bootply –

Bootstrap 4中的navbar-toggler-icon（汉堡包）使用SVG background-image。有2个“版本”的触发器图标图像。一个用于导航栏光，以及一个用于暗（逆）导航栏...

// 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-inverse .navbar-toggler-icon { 
    background-image: url("data:image/svg+xml;.."); 
}

所以，如果你想这个图像的颜色更改为别的东西，你可以自定义图标。例如，在这里，我将RGB值设置为粉红色（255,102,203）。注意在SVG数据的stroke='rgba(255,102,203, 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); 
}

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

OFC，另一个选择只使用来自另一个库，即一个图标：字体真棒，等等。

Update Bootstrap 4.0.0：

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

来源

2017-03-03 20:14:33 ZimSystem

你是一个生命的救星人:)谢谢！ – Rehan

在Bootstrap 4 beta 1中没有'.navbar-inverse'类。你可以从两个类中选择：'.navbar-light'或'.navbar-dark'。 – Qrzysio

如果你自举的上海社会科学院版本_variables.scss工作，你可以找到$navbar-inverse-toggler-bg或$navbar-light-toggler-bg在那里你可以改变你的切换按钮的颜色和样式。

在HTML中，你必须使用navbar-inverse或navbar-light这取决于你想使用哪个版本。

来源

2017-08-23 13:07:19 nedeco

在引导程序4中不适用于导航灯 – botbot

如果我希望使用Font Awesome来替换Bootstrap v4.0的.navbar-toggler-icon，我会在图元中插入图标代码吗？像这样：

<span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>

或者只是本身？

<button ...><i class="fa fa-bars" aria-hidden="true"></i></button>

来源

2017-09-05 21:29:17

对于Font-Awesome，您只需使用该元素而不包含任何其他类。如果您尝试添加额外的类，则会导致字体中断。因此，您提供的两个示例应该都可以正常工作 - 因为“”或“”被其他元素包围。 – Samuel

+1

谢谢！发布这个问题后，我想了几个小时。然后我必须弄清楚如何改变颜色，方法是将我的.navbar-toggler添加到其他元素中，这些元素使我的.bg-custom覆盖光线或反色。 –

0

工程上[email protected]以及

尝试这样的，它的工作100％尝试改变行程='RGBA（184，153，129，0 。5）”去第一bootstrap.min.css

找到这个CSS .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(184, 153, 129, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") }

尝试改变stroke='rgba(184, 153, 129, 0.5)'

来源

2017-11-23 13:25:42 core114

引导程序4更改汉堡Toggler颜色

回答

相关问题