📌  相关文章
📜  如何创建面包屑导航？

📅  最后修改于: 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”。 

  • 
    Home

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

  • 
    JavaScript

    • 例子：

    HTML 

    

  

    

  

    
    
        GeeksforGeeks
    
    
    

  

    输出：