CSS 如何更改Bootstrap 4导航栏按钮图标颜色

在本文中，我们将介绍如何修改Bootstrap 4导航栏按钮图标的颜色。Bootstrap是一个非常流行的CSS框架，提供了丰富的组件和样式，其中包括导航栏按钮。当我们使用默认的导航栏按钮时，图标的颜色可能无法满足我们的需求。因此，我们需要学习如何通过CSS来更改导航栏按钮图标的颜色。

阅读更多：CSS 教程

了解Bootstrap 4导航栏按钮图标的颜色属性

在开始修改Bootstrap 4导航栏按钮图标的颜色之前，我们需要了解一些基本的CSS属性。在Bootstrap 4中，导航栏按钮图标的颜色取决于以下两个CSS属性：

1. color属性：该属性控制图标的颜色。
2. background-color属性：该属性控制图标的背景色。

在默认情况下，导航栏按钮图标使用的是CSS变量 --primary，它对应的颜色由Bootstrap样式表定义。所以，要更改图标的颜色，我们可以修改这两个属性的值。

使用CSS自定义颜色

要自定义导航栏按钮图标的颜色，我们可以通过以下步骤进行操作：

1. 使用开发者工具检查元素，并找到需要修改的导航栏按钮图标元素的选择器。
2. 使用自己喜欢的文本编辑器打开CSS文件，并添加对应的样式。
3. 在所选的CSS选择器中，将color或background-color属性的值更改为您想要的颜色。

让我们看一个具体的示例，假设我们想要将导航栏按钮图标的颜色修改为红色：

.navbar .navbar-toggler-icon {
  color: red;
}

在上面的示例中，我们选择了导航栏按钮图标的选择器 .navbar-toggler-icon，并将 color属性的值设置为红色。

使用类别更改导航栏按钮图标颜色

除了手动更改CSS样式外，我们还可以使用Bootstrap提供的类别来更改导航栏按钮图标的颜色。Bootstrap 4为我们提供了许多预定义的类别，可以轻松地更改颜色。

要更改导航栏按钮图标的颜色，我们可以简单地为该元素添加一个相应的类别。下面是一些可以更改导航栏按钮图标颜色的Bootstrap类别：

• .text-primary：将图标颜色更改为Bootstrap主要颜色。
• .text-secondary：将图标颜色更改为Bootstrap次要颜色。
• .text-success：将图标颜色更改为Bootstrap成功颜色。
• .text-danger：将图标颜色更改为Bootstrap危险颜色。
• .text-warning：将图标颜色更改为Bootstrap警告颜色。
• .text-info：将图标颜色更改为Bootstrap信息颜色。
• .text-light：将图标颜色更改为浅色。
• .text-dark：将图标颜色更改为深色。

要使用这些类别来更改导航栏按钮图标的颜色，我们只需要将相应的类别添加到图标元素上。例如，如果我们想要将导航栏按钮图标的颜色更改为红色，可以这样写：

<button class="navbar-toggler"><span class="navbar-toggler-icon text-danger"></span></button>

在上面的示例中，我们添加了 text-danger 类别到导航栏按钮图标元素上，以将其颜色更改为危险颜色的红色。

总结

在本文中，我们学习了如何更改Bootstrap 4导航栏按钮图标的颜色。我们可以通过手动修改CSS样式或使用Bootstrap提供的类别来实现这个目标。无论哪种方法，都会为我们提供灵活性和自定义性，以满足我们对导航栏按钮图标颜色的需求。希望本文对您有所帮助！