详解bootstrap导航栏.nav与.navbar区别

刚刚看了bootstrap的导航栏，发现有点弄混了，现在来整理一下；

导航栏是一个很好的功能，是 Bootstrap 网站的一个突出特点。导航栏在您的应用或网站中作为导航页头的响应式基础组件。导航栏在移动设备的视图中是折叠的，随着可用视口宽度的增加，导航栏也会水平展开。在 Bootstrap 导航栏的核心中，导航栏包括了站点名称和基本的导航定义样式。

一、简单的ul,li组成的导航：

    

      1
    
    

      2
    
    

      3
    
  

 

//解析：.nav .nav-item .nav-link表示ul li是导航――.nav-pills表示胶囊状导航――.bg-dark/.nav-dark表示黑底白字――.justify-content-center表示导航栏在浏览器上居中显示

在浏览器上显示为：

 

缩小浏览器窗口显示为：

 

二、导航栏――

标签中class="navbar navbar-expand-sm"――

中class="navbar-nav"――
• 中class="nav-item"

  代码为：

  
    
  
      
  
        link1
      
      
  
        link1
      
      
  
        link1
      
      
  
        link1
      
    
    
  

  正常窗口显示为：

   

   缩小窗口小于576px时： 

  

  三、折叠导航栏

  当窗口小于576px的时候，不仅仅是简单的编程垂直导航；显示为一个button按钮，导航链接隐藏，点击button显示；

   代码为：

  
    
        
    
    
      
    
    
  
    
  
      
  
        link1
      
      
  
        link1
      
      
  
        link1
      
      
  
        link1
      
    
    
    
  
  
  

   //注意：.navbar-brand是品牌logo；

  窗口大于576的时候，显示为：

   

  窗口小于576的时候，显示为：

  

  　

  四、导航栏加上form表单表示搜索框：【？？？？？】

  代码如下：

  
    
        
    
    
      
    
    
  
    
  
      
  
        link1
      
      
  
        link1
      
      
  
        link1
      
      
  
        link1
      
    
    
    
  
          
  
            @
            
            
          
          
          search
        
  
  
  

  如图所示，如何使得导航栏中的form表单右对齐，移到最右边？？？？？float：eight应该也行吧。。

  

  emmmm.....知道了上面的解决方法了：利用网格系统，将左边的ul,li和右边的form表单分别排列；.col-sm-6;然后再给form表单右浮动；

  代码如下：

  
    
  
      
      
  
        
  
        
  
          
  
            link1
          
          
  
            link2
          
          
  
            link3
          
        
        
  
      
  
        
  
          
  
            @
            
            
            search
          
                
        
        
        
      
      
        
  
  

  

  以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。