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

📅  最后修改于: 2021-05-25 17:33:19             🧑  作者: 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”添加到nav元素。

步骤2：接下来，我们在列表元素中添加class =“ breadcrumb-item”。 

  • 
    Home

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

  • 
    JavaScript

    • 例子：

    的HTML 

    

  

    

  

    
    
        GeeksforGeeks
    
    
    

  

    输出：