Materialize CSS中的面包屑有哪些类别？
1. 什么是面包屑
在页面设计中，面包屑是一种很常见的元素，它通常位于页面顶部，用来显示用户当前所处的位置，以及返回上一级或上几级页面的链接。
最早出现面包屑是在操作系统文件浏览器中，用户可以一级一级地浏览文件夹，而面包屑可以帮助用户快速返回上一级或上上级文件夹。后来，面包屑被引入到网页设计中，起到类似的作用。
面包屑可以帮助用户快速理清自己所在的位置，同时也方便用户返回上级页面，提高了页面的易用性。
2. Materialize CSS中的面包屑
Materialize CSS是一款基于谷歌Material设计的前端框架，提供了大量的UI组件。面包屑也是其中之一。
Materialize CSS中的面包屑分为两种类型：文字型和图标型。其中文字型面包屑提供了一组带有链接的文字，而图标型面包屑则是在文字的基础上加上了图标。
文字型面包屑和图标型面包屑在使用中可以根据具体的场景进行选择。
3. Materialize CSS中的文字型面包屑
Materialize CSS中的文字型面包屑提供了一组带有链接的文字，可以用来显示用户当前所处的位置。下面是一个文字型面包屑的示例代码：
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#" class="breadcrumb">Home</a>
<a href="#" class="breadcrumb">Products</a>
<a href="#!" class="breadcrumb">Product Name</a>
</div>
</div>
</nav>
在此代码中，使用了nav-wrapper和breadcrumb两个类来创建面包屑组件。其中，nav-wrapper是 Materialize CSS提供的类，可以用来创建一个包含面包屑的导航栏；breadcrumb是 Materialize CSS提供的类，用来创建一个面包屑链接。
使用Materialize CSS的文字型面包屑，需要将面包屑链接放在一个nav-wrapper容器中，并使用breadcrumb类来创建链接。
4. Materialize CSS中的图标型面包屑
Materialize CSS中的图标型面包屑是在文字型面包屑的基础上加上了图标，可以增加面包屑的可读性和可视性。下面是一个图标型面包屑的示例代码：
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#" class="breadcrumb"><i class="material-icons">home</i></a>
<a href="#" class="breadcrumb"><i class="material-icons">library_books</i> Products</a>
<a href="#!" class="breadcrumb"><i class="material-icons">library_books</i> Product Name</a>
</div>
</div>
</nav>
在此代码中，使用了nav-wrapper、breadcrumb和material-icons三个类。其中，material-icons用来创建一个带有图标的面包屑链接，提高面包屑的可读性和可视性。
使用Materialize CSS的图标型面包屑，需要在面包屑链接中加入material-icons类，并在其中使用material-icons字体图标库中的图标。
5. 总结
面包屑是页面设计中非常重要的元素之一，可以帮助用户快速理清自己在页面中所处的位置，提高页面的易用性。Materialize CSS提供了两种类型的面包屑：文字型和图标型，可以根据具体的场景进行选择。使用Materialize CSS的面包屑，需要使用nav-wrapper来创建一个包含面包屑的导航栏，使用breadcrumb来创建面包屑链接，同时可以使用material-icons来增强面包屑的可读性和可视性。