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ù)。

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

1 面包屑導(dǎo)航

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

實例

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>面包屑演示</title>
  </head>
  <body>
      <br><br>
        <nav aria-label="breadcrumb">
        <ol>
        <li><a href="#">首頁</a></li>
        <li><a href="#">新聞</a></li>
        <li class="breadcrumb-item active" aria-current="page">國內(nèi)新聞</li>
        </ol>
        </nav>
   
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

2 自定義分隔符

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

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

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="stylesheet">
    <title>面包屑演示</title>
  </head>
  <body>
      <br><br>
        <nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
        <ol>
        <li><a href="#">首頁</a></li>
        <li><a href="#">新聞</a></li>
        <li class="breadcrumb-item active" aria-current="page">國內(nèi)新聞</li>
        </ol>
        </nav>
        
        <nav style="--bs-breadcrumb-divider: '|';" aria-label="breadcrumb">
            <ol>
            <li><a href="#">首頁</a></li>
            <li><a href="#">新聞</a></li>
            <li class="breadcrumb-item active" aria-current="page">國內(nèi)新聞</li>
            </ol>
            </nav>

            <nav style="--bs-breadcrumb-divider: '-';" aria-label="breadcrumb">
                <ol>
                <li><a href="#">首頁</a></li>
                <li><a href="#">新聞</a></li>
                <li class="breadcrumb-item active" aria-current="page">國內(nèi)新聞</li>
                </ol>
                </nav>
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

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

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

 <nav style="--bs-breadcrumb-divider: url(&#34;data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='currentColor'/%3E%3C/svg%3E&#34;);" aria-label="breadcrumb">
        <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#">首頁</a></li>
        <li class="breadcrumb-item"><a href="#">新聞</a></li>
        <li class="breadcrumb-item active" aria-current="page">國內(nèi)新聞</li>
        </ol>
        </nav>

2.3 不使用分隔符

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

<nav style="--bs-breadcrumb-divider: '';" aria-label="breadcrumb">
            <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="#">首頁</a></li>
            <li class="breadcrumb-item"><a href="#">新聞</a></li>
            <li class="breadcrumb-item active" aria-current="page">國內(nèi)新聞</li>
            </ol>
            </nav>

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

分享題目：Bootstrap中如何添加面包屑導(dǎo)航
當(dāng)前鏈接：http://muchs.cn/article40/johceo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、用戶體驗、企業(yè)建站、網(wǎng)站內(nèi)鏈、外貿(mào)建站、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

微信小程序開發(fā)