创建导航栏 |原版 HTML CSS 与 Bootstrap

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

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

示例 1：没有 Bootstrap 的导航栏（Vanilla HTML CSS）

    
        
        
    
    
        

            

                

                  
                
Tutorials
                
Students
                
Courses
                

                
Hire with us!
                
Login
            
        
    

说明：
HTML：

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

  CSS：

  • float：此属性将元素的对齐方式从垂直更改为水平。
  • list-style：当设置为 none 时，它会删除列表的项目符号。
  • text-decoration：负责链接的下划线。
  • 宽度：它指的是一个元素所占用的水平空间。
  • 高度：元素占用的垂直空间。

  输出：
  

  示例 2：使用 Bootstrap 的导航栏

  
  
      
          
          
          
      
    
      
          
  
              
  
                  
              
              
  
                  
  
                      Tutorials
                  
                  
  
                      Students
                  
                  
  
                      Courses
                  
              
              
  
              
  
                  
  
                      Hire with us!
                  
                  
  
                      Login
                  
              
          
      
  
  

  说明：因为我们的目标是一个没有任何 JavaScript 的静态导航栏，所以使用grid 代替 nav是可行的。

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

  CSS：

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

  输出：
  

  两种方法的区别：

  1. bootstrap 版本中的 CSS 非常少。
  2. 与引导程序相比，香草代码非常灵活。
  3. 编写普通代码非常乏味，而一旦理解引导代码就变得非常容易。