📜  如何创建面包屑导航?

📅  最后修改于: 2021-08-29 13:26:45             🧑  作者: Mango

在本文中,我们将学习如何创建面包屑导航。面包屑是辅助导航辅助工具,可帮助用户轻松浏览网站。面包屑为您提供方向,并准确显示您在网站层次结构中的位置。

方法 1:我们将按照以下步骤仅使用 CSS 创建面包屑。此方法允许准确自定义面包屑的外观。

步骤 1:创建导航链接的 HTML 列表。

第 2 步:设置 CSS display: inline以在同一行中显示列表。

.breadcrumb-navigation > li {
  display: inline;
}

第 3 步:在每个列表元素后添加一个分隔符。

.breadcrumb-navigation li + li:before {
  padding: 4px;
  content: "/";
}

例子:

HTML


  

    

  

    

GeeksforGeeks

       


HTML


  

    

  

    

        GeeksforGeeks     

       


输出:

方法 2:我们将按照以下步骤使用 Bootstrap 库创建面包屑。这允许人们快速创建漂亮的面包屑。

第 1 步:我们只需将aria-label=”breadcrumb” 添加到导航元素。

第 2 步:接下来我们在列表元素中添加 class=”breadcrumb-item”。

第三步:在当前列表元素中添加class=”breadcrumb-item active”。

例子:

HTML



  

    

  

    

        GeeksforGeeks     

       

输出: