创建导航栏| Vanilla HTML CSS Vs Bootstrap

导航栏代表导航栏，并且是网页的组成部分。它列出了网站内外的许多链接，并使不同部分之间的导航变得容易。目录，菜单和索引是导航栏的一些常见示例。

构建导航栏可能既费时又令人困惑。因此，像Bootstrap这样的库可以使用许多内置的类和选项来派上用场。

示例1：不带Bootstrap的导航栏(Vanilla HTML CSS)

    
        
        
    
    
        

            

                

                  
                
Tutorials
                
Students
                
Courses
                

                
Hire with us!
                
Login
            
        
    

说明：
HTML：

• ：父元素，用于包装导航栏中的所有按钮和图标。
• ：(无序列表)将所有链接存储在列表中是一个好习惯。
  • ：用于图标。
  • ：用作导航栏按钮。

  CSS：

  • float：此属性将元素的对齐方式从垂直更改为水平。
  • list-style：设置为none时，它将删除列表的项目符号。
  • 文本装饰：负责链接的下划线。
  • 宽度：指元素占用的水平空间。
  • height：元素占用的垂直空间。

  输出：
  

  示例2：使用Bootstrap的Navbar

  
  
      
          
          
          
      
    
      
          
  
              
  
                  
              
              
  
                  
  
                      Tutorials
                  
                  
  
                      Students
                  
                  
  
                      Courses
                  
              
              
  
              
  
                  
  
                      Hire with us!
                  
                  
  
                      Login
                  
              
          
      
  
  

  说明：由于我们的目标是不使用任何JavaScript的静态导航栏，因此使用grid代替nav是可行的。

  1. 将html文档链接到官方的Bootstrap CDN(内容交付网络)。
  2. 用bootstrap类行定义一个div(此类可帮助我们将行划分为小列)。
  3. 接下来，分别用类col-3、4、2和3定义四个div(整数对应于列的宽度)(总宽度为12)。
  4. 根据需要创建嵌套的div。
  5. 给所有按钮一个引导类btn，它为我们提供了所需的填充，边距和悬停效果。

  CSS：

  1. 这次，我们的CSS代码要小得多，并包含一些较小的样式，例如字体大小和颜色。
  2. 填充和边距由引导程序类负责。
  3. 导航栏的整个布局由引导程序行和列组成，这进一步减少了CSS。

  输出：
  

  两种方法之间的差异：

  1. 引导程序版本中的CSS很少。
  2. 与引导程序相比，原始代码非常灵活。
  3. 编写原始代码非常繁琐，而一旦理解了引导程序代码将变得非常容易。