Materialize CSS 中的面包屑分类

Materialize CSS 是一个基于 Material Design 设计风格的前端框架，它提供了一系列方便开发的 UI 组件，并且在使用时只需要简单的 HTML 代码即可。

面包屑是 Materialize CSS 中一个非常重要的 UI 组件，它可以帮助用户了解当前页面的位置，以及在需要的时候方便地返回上级页面。

在 Materialize CSS 中，面包屑可以分为两种类型，分别是简单面包屑和带导航菜单的面包屑。

简单面包屑

简单面包屑是最常用的一种类型，它只显示当前页面的位置，不带有任何导航菜单。

在 Materialize CSS 中，使用以下代码可以创建一个简单面包屑：

<nav>
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">首页</a>
      <a href="#!" class="breadcrumb">产品分类</a>
      <a href="#!" class="breadcrumb">手机数码</a>
      <a href="#!" class="breadcrumb">手机配件</a>
      <a href="#!" class="breadcrumb">手机外壳</a>
    </div>
  </div>
</nav>

在这段代码中，我们使用了 Materialize CSS 提供的 nav、nav-wrapper、col 和 breadcrumb 类来创建一个简单面包屑。其中，breadcrumb 类代表面包屑中的每一个链接。

带导航菜单的面包屑

带导航菜单的面包屑在简单面包屑的基础上增加了一个下拉菜单，用来展示当前页面的上级页面。

在 Materialize CSS 中，使用以下代码可以创建一个带导航菜单的面包屑：

<nav>
  <div class="nav-wrapper">
    <div class="col s12">
      <a href="#!" class="breadcrumb">首页</a>
      <a href="#!" class="breadcrumb">产品分类</a>
      <a href="#!" class="breadcrumb">手机数码</a>
      <a href="#!" class="breadcrumb">手机配件</a>
      <a href="#!" class="breadcrumb">手机外壳</a>
    </div>
    <ul id="nav-mobile" class="right hide-on-med-and-down">
      <li><a href="#!">返回</a></li>
      <li><a href="#!">查看更多信息</a></li>
    </ul>
  </div>
</nav>

在这段代码中，我们使用了 ul 和 li 标签来创建了一个下拉菜单。其中，hide-on-med-and-down 类可以让菜单在手机屏幕上隐藏。

总结

总之，在 Materialize CSS 中，面包屑是非常常用的一个 UI 组件，它可以帮助用户了解当前页面的位置，以及方便地返回上级页面。在使用面包屑时，开发者需要根据具体的需求选择简单面包屑或带导航菜单的面包屑。