IT培训-高端面授IT培训机构
云和教育:云和数据集团高端IT职业教育品牌 全国咨询热线:0371-67988003
课程 请选择课程
    校区 请选择校区
      • 华为
        授权培训中心
      • 腾讯云
        一级认证培训中心
      • 百度营销大学
        豫陕深授权运营中心
      • Oracle甲骨文
        OAEP中心
      • Microsoft Azure
        微软云合作伙伴
      • Unity公司
        战略合作伙伴
      • 普华基础软件
        战略合作伙伴
      • 新开普(股票代码300248)
        旗下丹诚开普投资
      • 中国互联网百强企业锐之旗
        旗下锐旗资本投资
      当前位置:
      首页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