如何更改 Bootstrap 4 导航栏切换按钮颜色？

自定义 Bootstrap 4 导航栏切换按钮颜色

上下文：

在 Bootstrap 网站中，较小屏幕通常具有用于导航的汉堡菜单按钮。默认情况下，此按钮具有特定颜色。

问题：

您可以修改 Bootstrap 4 导航栏切换按钮的颜色吗？

答案：

使用Bootstrap 的预定义样式：

Bootstrap 4 使用 SVG 背景图像作为切换图标。不同样式有特定的类：

• .navbar-dark：深色背景上的浅色图标
• .navbar-light：浅色背景上的深色图标

自定义图标：

如果这些预定义选项不能满足您的需求，您可以使用所需的颜色创建自定义 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");
}

此代码将图标颜色设置为粉红色。您可以调整 rgba() 函数中的值以匹配您喜欢的颜色。

使用外部图标库：

或者，您可以使用 Font 等库中的图标太棒了，确保您应用必要的 CSS 类来设置它们的样式。

Bootstrap 中的更新4.0.0:

以前称为 navbar-inverse，深色主题的导航栏类现在为 navbar-dark，它为链接和切换按钮生成较浅的颜色。

以上是如何更改 Bootstrap 4 导航栏切换按钮颜色？的详细内容。更多信息请关注PHP中文网其他相关文章！