如何在Bootstrap中更改Hamburger Toggler的颜色？

可以使用两种方法在Bootstrap 4中更改汉堡切换器的颜色：

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

汉堡切换器的颜色由两个内置类控制，这些类用于更改导航栏中内容的颜色：

• .navbar-light：此类用于将导航栏内容的颜色设置为暗。它将切换按钮的图标变暗。
• .navbar-dark：此类用于将导航栏内容的颜色设置为浅色。它将切换按钮图标变为白线。

注意：命名似乎有些倒退。 .navbar-dark可以使内容更暗，.navbar-light可以使内容更亮吗? -dark和-light代表背景的颜色，而不是导航栏上内容的颜色。

例子：

  

    
      How to change Hamburger Toggler color in Bootstrap ?
  
  
    
    

  

    
        
          Light Toggler
      
        
            
          
        
        
            
                
                    Link 1
                
                
                    Link 2
                
            
        
    
    
        
          Dark Toggler
      
        
            
          
        
        
            
                
                    Link 1
                
                
                    Link 2
                
            
        
    
  
    
        
          GeeksforGeeks
      
        How to change Hamburger Toggler
          color in Bootstrap ?
        The above togglers use the default 
          color classes available for toggler.
    
  
    
  
    
  
    
  

  

输出：

方法2：为切换器创建一个自定义类

Bootstrap使用SVG图像表示切换器。可以在图标内的行上使用修改后的颜色创建新的图像数据。图像数据内的笔触属性用于表示RGB值中的颜色。将该值修改为所需的颜色。

该新图标在.navbar-toggler-icon类中与背景图像一起使用，以便将内置图标替换为此新的切换图标。

/* Change the color in the stroke property of the image data */
.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(0, 128, 0, 0.8)’ stroke-width=’2′ stroke-linecap=’round’ stroke-miterlimit=’10’ d=’M4 8h24M4 16h24M4 24h24’/%3E%3C/svg%3E”);
}

通过使用所需颜色指定border-color属性来设置切换器的边框颜色。

/* Set the border color to the desired color */
.custom-toggler.navbar-toggler {
    border-color: lightgreen;
}

例子：

  

    How to change Hamburger
      Toggler color in Bootstrap ?
  
    
    
    
        /* Set the border color */
          
        .custom-toggler.navbar-toggler {
            border-color: lightgreen;
        }
        /* Setting the stroke to green using rgb values (0, 128, 0) */
          
        .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(0, 128, 0, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
        }
    

  

    
        Custom Toggler
        
            
        
        
            
                
                    Link 1
                
                
                    Link 2
                
            
        
    
  
    
        GeeksforGeeks
        How to change Hamburger Toggler color in Bootstrap ?
        The above togglers use the a custom classe for the toggler.
    
  
    
  
    
  
    
  

  

输出：