如何使用 Bootstrap 使用顶部导航和左侧导航栏？

Bootstrap 是一个开源 CSS 框架，前端开发人员使用它来制作交互式网页设计。 Bootstrap 的最新版本是 Bootstrap 5 alpha，它具有许多附加功能。但是，Bootstrap 5 仍处于持续开发阶段，因此大多数 Web 开发人员仍在使用 Bootstrap 4。Bootstrap 4 还提供了广泛的组件、实用程序和布局。导航栏和侧边栏是其他组件之一。虽然 Bootstrap 4 预定义了具有广泛功能的导航栏类，但没有专门的侧边栏预定义类。因此侧边栏主要是定制的部门。使用顶部导航栏和左侧导航栏时可以有不同的布局。本文演示了两种布局。

第一种方法：第一种方法处理在顶部导航栏正下方具有侧边栏的布局。整个主体分为两部分：顶部导航栏和其下方的容器。顶部导航栏下方的容器包含侧边栏分区以及网页主要内容的分区。该容器包含一行，而该行又包含两列。第一列包含侧边栏，第二列包含主要内容。

  

    
    
  
    
    
    
      
    
    
    
      
    
    
    
      
    
    
        html,
        body {
            height: 100%;
        }
  
        #green {
            height: 100%;
            background: green;
            text-align: center;
            color: black;
        }
    

  

    
    
        Navbar
        
        
            
            
        
        
        
            
                Home
                Features
                Price
                About
            
        
    
  
    
    
    
        
            
                Sidebar
  
                
                Link 1
                
                Link 2
                
                Link 3
                
                Link 4
                
            
            
            
                Bootstrap is a free and open-source
                tool collection for creating responsive
                websites and web applications. It
                is the most popular HTML, CSS, and
                JavaScript framework for developing
                responsive, mobile-first web sites.
            
        
    

  

输出：

第二种方法：第二种方法演示了一种布局，在侧边栏占据其所需空间后，导航栏仅占据正文的剩余宽度。 HTML 页面的主体包含一行，其中一行包含两列。第一列 col-2 用于显示侧边栏。第二列 col-10 用于显示导航栏。第二列还包含导航栏正下方的网页的主要内容。导航栏是可折叠的，即。当屏幕宽度减小时，它会折叠起来，可以使用汉堡包图标进行查看。

  

    Topnav with sidebar
  
    
    
  
    
    
    
      
    
    
    
      
    
    
    
      
    
    
        html,
        body {
            height: 100%;
        }
  
        #green {
            height: 100%;
            background: green;
            text-align: center;
            color: black;
            padding: 15px;
        }
    

  

    
    
  
        
        
            
                Sidebar
  
                
                Link 1
                
                Link 2
                
                Link 3
                
                Link 4
                
            
            
  
                
                
                    Navbar
                    
                    
                        
                    
                    
                    
                        
                            Home
                            Features
                            Price
                            About
                        
                    
                
  
                
                
                    Bootstrap is a free and open-source
                    tool collection for creating responsive
                    websites and web applications.
                    It is the most popular HTML, CSS, and
                    JavaScript framework for developing
                    responsive, mobile-first web sites.
                
            
        
    

  

输出：