Bootstrap中如何添加面包屑導(dǎo)航

這篇文章主要講解了“Bootstrap中如何添加面包屑導(dǎo)航”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Bootstrap中如何添加面包屑導(dǎo)航”吧！

員工經(jīng)過長期磨合與沉淀，具備了協(xié)作精神，得以通過團隊的力量開發(fā)出優(yōu)質(zhì)的產(chǎn)品。創(chuàng)新互聯(lián)公司堅持“專注、創(chuàng)新、易用”的產(chǎn)品理念，因為“專注所以專業(yè)、創(chuàng)新互聯(lián)網(wǎng)站所以易用所以簡單”。公司專注于為企業(yè)提供成都網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號開發(fā)、電商網(wǎng)站開發(fā)，小程序開發(fā)，軟件定制網(wǎng)站建設(shè)等一站式互聯(lián)網(wǎng)企業(yè)服務(wù)。

1 面包屑導(dǎo)航

面包屑導(dǎo)航一般用在網(wǎng)站頂部導(dǎo)航條下，指示當(dāng)前頁在導(dǎo)航層次結(jié)構(gòu)中的層次，一般用>或者|及空格間隔，Bootstrap5 面包屑導(dǎo)航通過CSS自動添加分隔符。

實例

  
    
    
    
    
    
    
  
  
      


        
        

        
首頁
        
新聞
        國內(nèi)新聞
        
        
   
     
  

2 自定義分隔符

2.1 通過修改本地CSS自定義屬性

如下代碼中，通過添加添加一個style="--bs-breadcrumb-divider: '>';"可以使用>做分割符號，還可以改成其他任何字符。

  
    
    
    
    
    
    
  
  
      


        ';" aria-label="breadcrumb">
        

        
首頁
        
新聞
        國內(nèi)新聞
        
        
        
        
            

            
首頁
            
新聞
            國內(nèi)新聞
            
            

            
                

                
首頁
                
新聞
                國內(nèi)新聞
                
                
     
  

2.2 使用圖標(biāo)或圖片

上面例子也可以使用嵌入式SVG圖標(biāo)。

 
        
        首頁
        新聞
        國內(nèi)新聞
        
        

2.3 不使用分隔符

您還可以刪除分隔符設(shè)置--bs-breadcrumb-divider: '';(CSS自定義屬性中的空字符串將計為一個值）。

            
            首頁
            新聞
            國內(nèi)新聞
            
            

感謝各位的閱讀，以上就是“Bootstrap中如何添加面包屑導(dǎo)航”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Bootstrap中如何添加面包屑導(dǎo)航這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

分享標(biāo)題：Bootstrap中如何添加面包屑導(dǎo)航
網(wǎng)頁地址：http://m.jiaotiyi.com/article/johceo.html