Materialize CSS 中的面包屑分类有哪些？

Materialize 是一个基于 Google Material Design 的现代响应式 CSS 框架。它的目标是开发一个设计系统，允许在任何平台上的所有服务中集成用户体验。 Materialise 是一种设计语言，它结合了成功设计的经典原则以及创新和技术。 Materialise 带有各种有用的组件，可帮助开发人员创建响应式网站。 BreadCrumbs 是 Materialize CSS 的内置组件之一。当您有多层内容来显示用户在网站或 Web App 上的当前工作位置时，基本使用 Materialize CSS 中的 Breadcrumb。

Materialize CSS 提供了各种 CSS 类来以简单的方式创建漂亮的面包屑。下表显示了可用的类及其用法。

• 导航包装器：它基本上将导航组件设置为面包屑或导航栏包装器。
• 面包屑：用于将锚元素设置为面包屑。最后一个锚元素是活动的，而其余的则显示为灰色。

我们可以使用以下语法创建面包屑。

句法：

  

    HTML5
    Materialize
    BreadCrumb
  

示例 1：在本示例中，我们创建了一个带有当前位置 BreadCrumb 的简单面包屑，这意味着您在 BreadCrumb 页面上，它在 Materialize 类别下，HTML5 指向 HTML5 页面。

HTML

   
      BreadCrumb
      
      
      
      
      
      
      
         .container {
           height: 64px;
           display: flex;
           align-items: center;
         }
         h1 {
           justify-content: center;
           text-align: center;
         }
         div {
           display: flex;
           align-items: center;
           color: white;
           background-color: green;
         }
         span {
           font-family: Roboto;
           font-weight: 300;
           font-size: 20px;
           color: white;
         }
         i {
           margin: 0 8px;
         }
      
   
   
      
         
            HTML5
            double_arrow
         
         
            Materialize
            double_arrow
         
         
            BreadCrumb
            double_arrow
         
      
      GeeksForGeeks
   

输出：

示例 2：在本示例中，我们将使用当前活动位置 BreadCrumb 创建一个简单的面包屑。

HTML

  
    BreadCrumb
    
    
    
      h1 {
        justify-content: center;
        text-align: center;
      }
    
    
    
    
    
  
  
  
    
      
        HTML5
        Materialize
        BreadCrumb
      
    
    GeeksForGeeks
  

输出：