首頁(yè)技術(shù)文章正文

Bootstrap怎樣實(shí)現(xiàn)面包屑導(dǎo)航？

更新時(shí)間:2023年03月28日16時(shí)49分來(lái)源:傳智教育瀏覽次數(shù):

傳統(tǒng)導(dǎo)航欄的頁(yè)面結(jié)構(gòu)，它不能展示出當(dāng)前頁(yè)在導(dǎo)航層次結(jié)構(gòu)中的位置。為此，Bootstrap提出面包屑導(dǎo)航，通過(guò)為導(dǎo)航層次結(jié)構(gòu)自動(dòng)添加分隔符，展示出當(dāng)前頁(yè)在導(dǎo)航層次結(jié)構(gòu)中的位置。

下面通過(guò)一個(gè)案例演示面包屑導(dǎo)航的實(shí)現(xiàn)方式。在chapterO1文件夾下創(chuàng)建名稱為bootstrap03的HTML.文件，用于設(shè)計(jì)一個(gè)面包屑導(dǎo)航欄，具體代碼如下所示。

<!DOCTYPE htnl>
<html>
<head>
  <title>bootstrap03</title>
  <link rel="stylesheet" href="bootatrap.min.css">
</bead>
<body>
  <!--面包屑導(dǎo)航-->
  <nav arla=label="breadcrunb">
    <ol class="breadcrunb">
      <11 class="breadcrumb-item"><a href="¥">首負(fù)</a></li>
        <li class="breadcrumb-item"><a href="¥">簡(jiǎn)介</a></1i>
        </ol>
      </nav>
    </body>
    </html>

在文件1-20中，第5行代碼引入bootstrap.mincss文件;第914行代碼定義標(biāo)簽，并設(shè)置aria-label屬性值為breadcnumb，表示面包屑導(dǎo)航。其中，第10行代碼在nav標(biāo)簽下定義類名為breadenumb的有序列表;第1l行代碼在標(biāo)簽下定義類名為breadenumb-item的標(biāo)簽表示首頁(yè)鏈接，第l2行代碼在標(biāo)簽下定義了類名為breadenuml-item 的標(biāo)簽表示簡(jiǎn)介鏈接。運(yùn)行結(jié)果如下圖。

1679993074077_面包屑.png