如何在 Bootstrap 中更改导航栏颜色？

在 Bootstrap 中更改导航栏颜色有两种方法

方法 1

众所周知，我们在 Bootstrap 中有内置的类，每个类都在文档中定义。 因此，我们可以通过将类名更改为适当的颜色类名来更改任何文本颜色。

例如

• .navbar-light: 此类用于将文本颜色更改为深色。 因此，导航栏背景将更浅，文本将更深。
• .navbar-dark: 此类用于将文本颜色从深色更改为浅色。 因此，导航栏的背景颜色将更深，文本颜色将更浅。
• .bg-primary: 此类用于将文本颜色更改为原色。
• .bg-secondary: 此类用于将文本颜色更改为辅助颜色。
• .bg-danger: 此类用于将文本颜色更改为危险颜色。
• .bg-warning: 此类用于将文本颜色更改为警告颜色。
• .bg-info: 此类用于将文本颜色更改为信息颜色。
• .bg-success: 此类用于将文本颜色更改为成功颜色。
• .bg-dark: 此类用于将文本颜色更改为深色。
• .bg-light: 此类用于将文本颜色更改为浅色。
• .bg-transparent: 此类用于将导航栏的颜色更改为透明颜色。
• .bg-white: 此类用于将文本颜色更改为白色。

示例 1

输出

说明

在上面的文章中，我们采用了不同的栏，并通过更改它们的类名设置了不同的颜色。 对于每个导航栏，我们定义了内置的类名，它们将相应地设置它们的颜色。

方法 2

我们可以使用 CSS 的背景颜色属性手动设置导航栏的样式。

示例 1

输出

说明

在上面的代码中，我们使用 nav 标签创建了一个导航栏，并为其指定了一个类名。 然后，在 style 标签中，我们定义了它的背景颜色和文本颜色，并成功地更改了它。