溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“Bootstrap中如何添加面包屑導航”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Bootstrap中如何添加面包屑導航”吧！
面包屑導航一般用在網站頂部導航條下，指示當前頁在導航層次結構中的層次，一般用>或者|及空格間隔，Bootstrap5 面包屑導航通過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">國內新聞</li> </ol> </nav> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
如下代碼中，通過添加添加一個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">國內新聞</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">國內新聞</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">國內新聞</li> </ol> </nav> <script src="bootstrap5/bootstrap.bundle.min.js" ></script> </body> </html>
上面例子也可以使用嵌入式SVG圖標。
<nav style="--bs-breadcrumb-divider: url("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");" 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">國內新聞</li> </ol> </nav>
您還可以刪除分隔符設置--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">國內新聞</li> </ol> </nav>
感謝各位的閱讀，以上就是“Bootstrap中如何添加面包屑導航”的內容了，經過本文的學習后，相信大家對Bootstrap中如何添加面包屑導航這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
