bootstrap导航栏.nav与.navbar区别

bootstrap导航栏.nav与.navbar区别

 

一、简单的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表单右浮动；

  　　　　代码如下：

   

   
  
   2     
  
   3         
   4         
  
   5             
  
   6             
  
   7                 
  
   8                     link1
   9                 
  10                 
  
  11                     link2
  12                 
  13                 
  
  14                     link3
  15                 
  16             
  17             
  18 
  19         
  
  20             
  
  21                 
  
  23                     @
  24                     
  25                     
  31                     search
  32                 
                              
  33             
  34             
              
  35         
  36         
  37