如何在 Bootstrap 中使用 navbar-inverse 创建菜单？

在本文中，我们将学习如何在 Bootstrap 中使用 navbar-inverse 创建菜单，并通过示例了解其实现。在为网站制作导航栏时，菜单栏是一个非常重要的部分。我们可以使用 Bootstrap navbar-inverse类创建一个菜单栏以及反转菜单栏的颜色。

Bootstrap 中的导航栏包含许多类，例如：

• .navbar-brand类：该类用于您的公司、产品或项目名称，或任何品牌名称。
• .navbar-nav类：该类用于全高和轻量级导航（包括对下拉菜单的支持）。
• .navbar-toggler类：该类用于折叠插件和其他导航切换行为。
• .navbar-text类：该类用于添加垂直居中的文本字符串。
• .collapse.navbar-collapse类：该类用于通过父断点对导航栏内容进行分组和隐藏。
• flex 和 spacing 实用程序类用于任何表单控件和操作。

我们将通过示例了解上述类及其用法。让我们看看如何使用 Bootstrap 实现导航栏。

第 1 步：在我们的 HTML 文件中导入 Bootstrap CDN 链接。

第 2 步：在 中添加

标记，其中包含 navbar 和 navbar-default 类。

第三步：创建一个

标签，类名为navbar navbar-default， &在

标签内，我们将创建一个类名为“ container-fluid ”的

。现在，为了使用品牌标志或名称，我们将添加一个类为navbar-brand，并在其中创建一个类名为“ nav navbar-nav ”的

标签，然后是使用
• 标签的项目。

  
    
  
      GeekforGeeks
      
  
        
  Web Technology 
        
  Data Structure
        
  Algorithm
        
  Competitive Programming
        
  Programming Languages
      
    
  

  在这个阶段，我们已经使用 Bootstrap 创建了一个基本的导航栏。下面的代码示例说明了 Bootstrap 中的基本导航栏。

  完整代码：

  
  
  
  

  输出：

  

  Bootstrap 中的简单导航栏

  从上面的输出中，我们可以看到菜单栏的背景是白色的，如果我们需要将背景更改为黑色并将其他文本内容更改为白色，我们可以简单地在 < nav> 标签如下图所示。

  示例：此示例说明了使用.navbar-inverse类在 Bootstrap 中将背景更改为黑色。

  HTML

  
  
    
      
      
      
      
      
    
    
    
      
  
        
  
          GeekforGeeks
          
  
            
  Web Technology 
            
  Data Structure
            
  Algorithm
            
  Competitive Programming
            
  Programming Languages
          
        
      
    
  
  

  输出：

  

  添加navbar-inverse后，navbar变黑

  从上面的输出可以清楚地看到，颜色变为黑色，字体变为白色。因此，我们已经使用 Bootstrap 使用“ navbar-inverse ”类成功地创建了一个基本的导航栏。现在，我们还可以在导航栏中添加一些功能，例如下拉菜单和搜索选项。

  为了制作下拉菜单，我们将使用以下代码：

  
   
     Dropdown
     
   
   
   
  
     
  Link1
     
  Link2
     
  Link3
   
  

  为了将搜索选项放在导航栏中的右侧，我们将使用以下代码片段：

  
    
  
      
    
    Submit
    
  

  至此，我们在添加了更多功能（如下拉和搜索栏）后，制作了更新的导航栏代码。

  完整代码：

  HTML

  
  
    
      
      
      
      
    
      
    
    
    
      
  
        
  
          GeeksforGeeks
          
  
            
  Data Structure
            
  Algorithm
            
  Competitive Programming
            
  
              
                    Web Technology
              
              
  
                
  
                  HTML
                
                
  
                  CSS
                
                
  
                  JavaScript
                
              
            
          
          
  
            
  
              
            
            Submit
            
          
        
      
    
  
  

  输出：

  

  添加下拉和搜索选项等功能后的导航栏

  注意： “. navbar-inverse ”类现在已经过时了。它用于引导程序使导航栏变暗直到版本 3.3.7。现在，“. bg-dark ”类用于在当前版本 5.0.0 和之前的版本 4.6.1 中使组件变暗。