bootstrap中.nav与.navbar有哪些区别？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的德城网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

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

    
      1
    
    
      2
    
    
      3
    
  

 

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

在浏览器上显示为：

缩小浏览器窗口显示为：

二、导航栏——

正常窗口显示为：

 缩小窗口小于576px时： 

三、折叠导航栏

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

 代码为：

  
      
  
  
    
  
  
  
    
      link1
    
    
      link1
    
    
      link1
    
    
      link1
      
  
  

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

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

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

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

代码如下：

  
      
  
  
    
  
  
  
    
      link1
    
    
      link1
    
    
      link1
    
    
      link1
      
  
  
        
          @