bootstrap中.nav與.navbar有哪些區(qū)別？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站設(shè)計、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時代的德城網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

一、簡單的ul,li組成的導(dǎo)航：

    
      1
    
    
      2
    
    
      3
    
  

 

//解析：.nav .nav-item .nav-link表示ul li是導(dǎo)航——.nav-pills表示膠囊狀導(dǎo)航——.bg-dark/.nav-dark表示黑底白字——.justify-content-center表示導(dǎo)航欄在瀏覽器上居中顯示

在瀏覽器上顯示為：

縮小瀏覽器窗口顯示為：

二、導(dǎo)航欄——

正常窗口顯示為：

 縮小窗口小于576px時： 

三、折疊導(dǎo)航欄

當(dāng)窗口小于576px的時候，不僅僅是簡單的編程垂直導(dǎo)航；顯示為一個button按鈕，導(dǎo)航鏈接隱藏，點擊button顯示；

 代碼為：

  
      
  
  
    
  
  
  
    
      link1
    
    
      link1
    
    
      link1
    
    
      link1
      
  
  

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

窗口大于576的時候，顯示為：

窗口小于576的時候，顯示為：

四、導(dǎo)航欄加上form表單表示搜索框：【？？？？？】

代碼如下：

  
      
  
  
    
  
  
  
    
      link1
    
    
      link1
    
    
      link1
    
    
      link1
      
  
  
        
          @