-
国家级
全民数字素养与技能培训基地 -
河南省
第一批产教融合型企业建设培育单位 -
郑州市
数字技能人才（码农）培养评价联盟
传统导航栏的页面结构，它不能展示出当前页在导航层次结构中的位置。为此，Bootstrap提出面包屑导航，通过为导航层次结构自动添加分隔符，展示出当前页在导航层次结构中的位置。
下面通过一个案例演示面包屑导航的实现方式。在chapterO1文件夹下创建名称为bootstrap03的HTML.文件，用于设计一个面包屑导航栏，具体代码如下所示。
<!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行代码定义标签，并设置aria-label属性值为breadcnumb，表示面包屑导航。其中，第10行代码在nav标签下定义类名为breadenumb的有序列表;第1l行代码在标签下定义类名为breadenumb-item的标签表示首页链接，第l2行代码在标签下定义了类名为breadenuml-item 的标签表示简介链接。运行结果如下图。
