Bootstrap中怎麼加入麵包屑導航？以下這篇文章跟大家介紹Bootstrap5麵包屑導航組件的用法，希望對大家有幫助！
麵包屑導覽一般用在網站頂部導覽列下，指示目前頁在導覽層次結構中的層次，一般用>或|及空格間隔，Bootstrap5 麵包屑導航透過CSS自動新增分隔符號。 【相關推薦：《bootstrap教學》】
#下面圖中，在導航條下面那行小的導航就是一個常見的麵包屑導航
實例
<!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="max-width:90%">';"可以使用>做分割符號，也可以改成其他任何字符。
<!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="max-width:90%" 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="max-width:90%" 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基礎教程！ ！
以上是Bootstrap中怎麼加入麵包屑導航？方法淺析的詳細內容。更多資訊請關注PHP中文網其他相關文章！
