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

可以使用两种方法在Bootstrap中更改导航栏颜色：

方法1：使用内置的颜色类

更改文字颜色

可以使用两个内置类来更改导航栏的文本颜色：

• navbar-light：此类会将文本的颜色设置为深色。在使用浅背景色时使用。
• navbar-dark：此类将文本的颜色设置为浅色。在使用深色背景色时使用。

更改背景颜色：

Bootstrap 4具有用于任何背景颜色的一些内置类。这些可用于设置导航栏背景的颜色。可用的各种背景类是：

• .bg-primary：将颜色设置为原色。
• .bg-secondary：将颜色设置为辅助颜色。
• .bg-success：将颜色设置为成功颜色。
• .bg-danger：将颜色设置为危险颜色。
• .bg-warning：将颜色设置为警告颜色。
• .bg-info：将颜色设置为信息颜色。
• .bg-light：将颜色设置为浅色。
• .bg-dark：将颜色设置为深色。
• .bg-white：将颜色设置为白色。
• .bg-transparent：这会将导航栏设置为透明。

例子：

  

    
  
    
    

  

    
    

        
          Light color background
      
    
  
    

        
          Warning color background
      
    
  
    
    

        
          Dark color background
      
    
  
    

        
          Primary color background
      
    
  
    

        
          Secondary color background
      
    
  
    

        
          Success color background
      
    
  
    

        
GeeksforGeeks
        
          How to change navigation bar color in Bootstrap ?
      
        
The above navigation bars use some of the
          default color classes available in Bootstrap4.
    

  

输出：

方法2：为导航栏创建一个自定义类

可以创建一个自定义类来指定导航栏的背景颜色和文本颜色。根据所需的值使用CSS设置此类的样式。类名的保存方式将覆盖内置导航栏类。

通过直接用所需颜色指定background-color属性来设置背景颜色。

/* Modify the backgorund color */
.navbar-custom {
    background-color: lightgreen;
}

可以使用.navbar-text和.navbar-brand类设置导航栏文本和品牌文本颜色。这些是内置的导航栏类，可以通过使用相同的类名来覆盖它们。文本颜色是使用color属性指定的。

/* Modify brand and text color */
.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
    color: green;
}

例子：

  

    
  
    
    
  
    

  

    
    

        
          Custom color background navbar
      
    
  
    

        
GeeksforGeeks
        How to change navigation bar 
          color in Bootstrap ?
        
        
The above navigation bar uses a 
          custom class for changing the colors.
    

  

输出：