IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 国家级
    全民数字素养与技能培训基地
  • 河南省
    第一批产教融合型企业建设培育单位
  • 郑州市
    数字技能人才(码农)培养评价联盟
当前位置:
首页IT问答正文

Bootstrap怎样实现面包屑导航?

  • 发布时间:
    2023-03-30
  • 版权所有:
    云和教育
  • 分享:

传统导航栏的页面结构,它不能展示出当前页在导航层次结构中的位置。为此,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 的标签表示简介链接。运行结果如下图。

1679993074077_面包屑.png