真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

Bootstrap中導(dǎo)航條的示例分析

這篇文章主要介紹了Bootstrap中導(dǎo)航條的示例分析，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司于2013年創(chuàng)立，公司以網(wǎng)站制作、網(wǎng)站設(shè)計、系統(tǒng)開發(fā)、網(wǎng)絡(luò)推廣、文化傳媒、企業(yè)宣傳、平面廣告設(shè)計等為主要業(yè)務(wù)，適用行業(yè)近百種。服務(wù)企業(yè)客戶近千家，涉及國內(nèi)多個省份客戶。擁有多年網(wǎng)站建設(shè)開發(fā)經(jīng)驗。為企業(yè)提供專業(yè)的網(wǎng)站建設(shè)、創(chuàng)意設(shè)計、宣傳推廣等服務(wù)。 通過專業(yè)的設(shè)計、獨特的風(fēng)格，為不同客戶提供各種風(fēng)格的特色服務(wù)。

導(dǎo)航條（navbar）和導(dǎo)航（nav），就相差一個字，多了一個“條”字。其實在Bootstrap框架中他們還是明顯的區(qū)別。在導(dǎo)航條(navbar)中有一個背景色、而且導(dǎo)航條可以是純鏈接（類似導(dǎo)航），也可以是表單，還有就是表單和導(dǎo)航一起結(jié)合等多種形式。本文將詳細(xì)介紹Bootstrap導(dǎo)航條。

基礎(chǔ)導(dǎo)航條

在Bootstrap框架中，導(dǎo)航條和導(dǎo)航從外觀上差別不是太多，但在實際使用中導(dǎo)航條要比導(dǎo)航復(fù)雜得多。

導(dǎo)航條是在應(yīng)用或網(wǎng)站中作為導(dǎo)航頁頭的響應(yīng)式基礎(chǔ)組件。它們在移動設(shè)備上可以折疊（并且可開可關(guān)），且在視口（viewport）寬度增加時逐漸變?yōu)樗秸归_模式

在制作一個基礎(chǔ)導(dǎo)航條時，主要分以下幾步：

1、首先在制作導(dǎo)航的列表(

    )基礎(chǔ)上添加類名“navbar-nav”

    2、在列表外部添加一個容器（p），并且使用類名“navbar”和“navbar-default”

    【原理分析】

    “.navbar”樣式的主要功能就是設(shè)置左右padding和圓角等效果，但它和顏色相關(guān)的樣式?jīng)]有進(jìn)行任何的設(shè)置

    .navbar {
  position: relative;
  min-height: 50px;
  margin-bottom: 20px;
  border: 1px solid transparent;
}

    導(dǎo)航條的顏色都是通過“.navbar-default”來進(jìn)行控制

    .navbar-default {
  background-color: #f8f8f8;
  border-color: #e7e7e7;
}

    navbar-nav樣式是在導(dǎo)航.nav的基礎(chǔ)上重新調(diào)整了菜單項的浮動與內(nèi)外邊距。同時也不包括顏色等樣式設(shè)置，而顏色和其他樣式是通過配合父容器“navbar-default”來一起實現(xiàn)

    [注意]最好使用

Bootstrap中導(dǎo)航條的示例分析

導(dǎo)航條部件

【標(biāo)題】

在Web頁面制作中，常常在菜單前面都會有一個標(biāo)題（文字字號比其它文字稍大一些），其實在Bootstrap框架也做了這方面考慮，其通過“navbar-header”和“navbar-brand”來實現(xiàn)


  　
  　    小火柴的藍(lán)色理想
  　
            HTML        
  • CSS
    •        
  • Javascript
    •        
  • Bootstrap
    •        
  • jQuery
    •      

    Bootstrap中導(dǎo)航條的示例分析

    【品牌圖標(biāo)】

    將導(dǎo)航條內(nèi)放置品牌標(biāo)志的地方替換為 元素即可展示自己的品牌圖標(biāo)。由于 .navbar-brand 已經(jīng)被設(shè)置了內(nèi)補(bǔ)（padding）和高度（height），需要根據(jù)自己的情況添加一些 CSS 代碼從而覆蓋默認(rèn)設(shè)置

    
   
      
        
      
    
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
       
  • Bootstrap
    • 
       
  • jQuery
    • 
     

    Bootstrap中導(dǎo)航條的示例分析【二級菜單】

    在基礎(chǔ)導(dǎo)航條中對菜單提供了當(dāng)前狀態(tài)，禁用狀態(tài)，懸浮狀態(tài)等效果，而且也可以帶有二級菜單的導(dǎo)航條

    
    
         網(wǎng)站首頁
        
          系列教程
          
            
  • CSS3
    • 
            
  • JavaScript
    • 
            PHP
          
       
       
  • 關(guān)于我們
    • 
    

    Bootstrap中導(dǎo)航條的示例分析

    【部件排列】

    通過添加 .navbar-left 和 .navbar-right工具類讓導(dǎo)航鏈接、表單、按鈕或文本對齊。兩個類都會通過 CSS 設(shè)置特定方向的浮動樣式。例如，要對齊導(dǎo)航鏈接，就要把它們放在個分開的、應(yīng)用了工具類的

                                                         搜索      

    Bootstrap中導(dǎo)航條的示例分析

    【按鈕】

    對于不包含在

    中的

    Bootstrap中導(dǎo)航條的示例分析【文本】

    把文本包裹在 .navbar-text中時，為了有正確的行距和顏色，通常使用

    標(biāo)簽

    
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     
    Signed in as huochai

    Bootstrap中導(dǎo)航條的示例分析

    【非導(dǎo)航鏈接】

    可以在標(biāo)準(zhǔn)的導(dǎo)航組件之外添加標(biāo)準(zhǔn)鏈接，使用 .navbar-link 類可以讓鏈接有正確的默認(rèn)顏色和反色設(shè)置

    
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     
    Signed in as huochai

    Bootstrap中導(dǎo)航條的示例分析

    導(dǎo)航條位置

    很多情況下，設(shè)計師希望導(dǎo)航條固定在瀏覽器頂部或底部，這種固定式導(dǎo)航條的應(yīng)用在移動端開發(fā)中更為常見。Bootstrap框架提供了g兩種固定導(dǎo)航條的方式：

    ?  .navbar-fixed-top：導(dǎo)航條固定在瀏覽器窗口頂部

    ?  .navbar-fixed-bottom：導(dǎo)航條固定在瀏覽器窗口底部

    使用方法很簡單，只需要在制作導(dǎo)航條最外部容器navbar上追加對應(yīng)的類名即可

    這個固定的導(dǎo)航條會遮住頁面上的其它內(nèi)容，除非給 元素底部設(shè)置了 padding。提示：導(dǎo)航條的默認(rèn)高度是 50px

    body { padding-top: 70px; }
body { padding-bottom: 70px; }
    

    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     


    測試內(nèi)容

    測試內(nèi)容

    測試內(nèi)容

    測試內(nèi)容

    測試內(nèi)容

    測試內(nèi)容

    測試內(nèi)容
    

    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     

    【靜止在頂部】

    通過添加 .navbar-static-top 類即可創(chuàng)建一個與頁面等寬度的導(dǎo)航條，它會隨著頁面向下滾動而消失

    
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     


    測試內(nèi)容


    測試內(nèi)容


    測試內(nèi)容


    測試內(nèi)容


    測試內(nèi)容


    測試內(nèi)容


    測試內(nèi)容

    響應(yīng)式導(dǎo)航條

    Bootstrap的響應(yīng)式導(dǎo)航條實現(xiàn)如下：

    1、保證在窄屏?xí)r需要折疊的內(nèi)容必須包裹在帶一個p內(nèi)，并且為這個p加入collapse、navbar-collapse兩個類名。最后為這個p添加一個class類名或者id名

    
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     

    或者

    
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     

    2、保證在窄屏?xí)r要顯示的圖標(biāo)樣式（固定寫法）：

    
  Toggle Navigation
  
  
  

    3、并為button添加data-target=".類名/#id名"，究競是類名還是id名呢？由需要折疊的p來決定。如

    
  Toggle Navigation
  
  
  

    或者，對應(yīng)class="example"

    
  Toggle Navigation
  
  
  

    
  
       
         Toggle Navigation
         
         
         
       
  
  
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     
  

    Bootstrap中導(dǎo)航條的示例分析

    反色導(dǎo)航條

    反色導(dǎo)航條其實是Bootstrap框架提供的第二種風(fēng)格的導(dǎo)航條，與默認(rèn)的導(dǎo)航條相比，使用方法并無區(qū)別，只是將navbar-deafult類名換成navbar-inverse。其變化只是導(dǎo)航條的背景色和文本做了修改

    
    
       HTML
       
  • CSS
    • 
       
  • Javascript
    • 
     

    Bootstrap中導(dǎo)航條的示例分析

    感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Bootstrap中導(dǎo)航條的示例分析”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!


    本文標(biāo)題：Bootstrap中導(dǎo)航條的示例分析
    文章URL：http://weahome.cn/article/goihps.html

    在線咨詢

    微信咨詢

    電話咨詢

    028-86922220（工作日）

    18980820575（7×24）

    提交需求

    返回頂部