Bootstrap怎樣實現(xiàn)面包屑導航？
傳統(tǒng)導航欄的頁面結(jié)構(gòu)，它不能展示出當前頁在導航層次結(jié)構(gòu)中的位置。為此，Bootstrap提出面包屑導航，通過為導航層次結(jié)構(gòu)自動添加分隔符，展示出當前頁在導航層次結(jié)構(gòu)中的位置。
下面通過一個案例演示面包屑導航的實現(xiàn)方式。在chapterO1文件夾下創(chuàng)建名稱為bootstrap03的HTML.文件，用于設(shè)計一個面包屑導航欄，具體代碼如下所示。
<!DOCTYPE htnl><html><head>
?<title>bootstrap03</title>
?<link rel="stylesheet" href="bootatrap.min.css"></bead><body>
?<!--面包屑導航-->
?<nav arla=label="breadcrunb">
? ?<ol class="breadcrunb">
? ? ?<11 class="breadcrumb-item"><a href="￥">首負</a></li>
? ? ? ?<li class="breadcrumb-item"><a href="￥">簡介</a></1i>
? ? ? ?</ol>
? ? ?</nav>
? ?</body>
? ?</html>
在文件1-20中，第5行代碼引入bootstrap.mincss文件;第914行代碼定義標簽，并設(shè)置aria-label屬性值為breadcnumb，表示面包屑導航。其中，第10行代碼在nav標簽下定義類名為breadenumb的有序列表;第1l行代碼在標簽下定義類名為breadenumb-item的標簽表示首頁鏈接，第l2行代碼在標簽下定義了類名為breadenuml-item 的標簽表示簡介鏈接。運行結(jié)果如下圖。
