导航栏如何在 Bootstrap 中工作？

导航栏是放置在页面顶部的导航标题，有助于使其更加用户友好，从而使网站导航变得容易，用户可以直接搜索他们感兴趣的主题。 .navbar类用于创建导航栏。导航栏可以扩展或折叠，具体取决于设备大小，即导航栏用于通过使用.navbar-expand-xl|lg|md|sm类创建响应式设计。因此，它为网页提供了灵活性。

先决条件：要了解导航栏的概念，需要具备 HTML、CSS 和 Bootstrap 的基础知识。

在 Bootstrap 中实现导航栏的分步指南：

• Bootstrap CDN：要使用 Bootstrap 提供的代码片段，我们需要在 HTML 头元素中添加以下 CDN 文件。

• 使用.navbar和.添加
  标记 标签中的 navbar-expand-lg navbar-dark bg-dark类。

• 为了添加品牌标志，我们需要 一个.navbar-brand类，它将包含图像以及alt属性，如果图像未正确加载，则将显示文本。

• 我们需要一个切换按钮，方法是添加.navbar-toggler和.collapse navbar-collapse类，这些类将在单击按钮时显示或隐藏菜单项。
• 现在，在导航栏中添加导航项。

实现：我们需要以下语法来理解 Navbar 的工作原理：

• HTML nav 元素： HTML nav 元素是类似于 HTML div 元素的容器元素。我们使用 HTML nav 元素向我们的网站添加导航栏。

• 导航栏中的导航项目：使用以下语法在导航栏中添加导航项目：-

    Home
    (current)

About Us
Tutorials

    Disabled

• 导航链接：使用以下语法在网页中添加链接：-

About Us

示例：此示例说明了引导导航栏。我们为网页添加了徽标和一些信息。如果您单击导航栏图标，则它会以列表形式显示与网页相关的所有信息。

HTML

  

  
    
    
    
    
      
    
    
      
    
    
  
    
    
        .navbar-image {
            width: 80px;
            height: 80px;
            padding: 10px;
        }
    

  

    
        
            
        
        
              
            
        
  
        
            
                
                    Home (current)
                
                About Us
                Tutorials
                Student
                Courses
                Help
            
        
    
  
    
        
            GeeksforGeeks
            DSA Course
            
            
                The one-stop solution is GeeksforGeeks 
                DSA Self-Paced Course with Lifetime 
                Access is a complete package for you 
                to learn and master all the Data 
                Structure Concepts.
            
  
  
            Know more
        
    

  

输出：