Materialize CSS中的面包屑有哪些类别

Materialize是一个用于设计的CSS框架，因为它使用了经典的原则并将其与创新和技术相结合。Materialize的创造者是google，因为他们开发了一个设计系统，可以让每一个用户在每一种类型的产品中获得统一的用户体验，无论用户使用的是什么平台。面包屑是 materialize CSS 中的一个组件，主要用于有很多层的时候，以显示用户在网站或网络应用中的当前位置。

在这篇文章中，我们将了解一下 materialize CSS 中面包屑的类别。

materialize CSS中的面包屑类别

materialize CSS中的CSS类是用来轻松创建面包屑的。所使用的类包括

breadcrumb类 --breadcrumb类用于显示最后一个锚点标签是有效的，其他的锚点标签是灰色的。

nav-wrapper类 --该类用于将导航的组件设置为breadcrumb。

让我们来看看在Materialize CSS中创建面包屑的语法。

语法

<nav>
   <div class="nav-wrapper blue">
      <a href="#html5" class="breadcrumb">HTML</a>
      <a href="#materialize example" class="breadcrumb">Materialize example</a>
      <a href="#breadcrumb" class="breadcrumb example">BreadCrumb example</a>
   </div>
</nav>

在上面的例子中，你可以看到我们首先打开了一个导航标签，然后创建了一个nav-wrapper类，之后我们创建了3个不同的锚标签，并给了它们面包屑类。

为了更好地理解面包屑的概念，让我们看一个例子

例子

在这个例子中，我们将采取的方法是创建一个简单的面包屑，这意味着HTML将指向面包屑页面。让我们看一下代码

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example of breadcrumb CSS</title>
      <style>
         .breadcrumb {
            padding: 0.5rem 1rem;
            background-color: #f5f5f5;
            color: #333;
            font-size: 1rem;
            text-decoration: none;
            font-family: Arial, sans-serif;
         }
         .breadcrumb:hover {
            background-color: #2596be;
         }
         .breadcrumb:active {
            background-color:#efaf67;
         }
         .breadcrumb:not(:last-child):after {
            content: ">";
            padding: 0 0.5rem;
         }
      </style>
   </head>
   <body>
      <nav>
         <div class="nav-wrapper">
            <div class="col s12">
               <a href="#!" class="breadcrumb">First</a>
               <a href="#!" class="breadcrumb">Second</a>
               <a href="#!" class="breadcrumb">Third</a>
            </div>
         </div>
      </nav>
   </body>
</html>

在上面的例子中，我们使用了 “breadcrumb “类，帮助我们锚定 “nav “元素中的元素。用户可以使用不同的类，如 “青色 “或 “浅蓝色 “来改变面包屑的颜色，如果用户想改变面包屑的位置，可以使用 “右侧 “类。

注意 - 有不同的方法来安装 materialize CSS。一种方法是进入 materialize CSS 的官方网站，然后下载最新的版本，在这个版本中，你必须在你的项目所在的目录中下载 materialize.min.js 和 materialize.min.css。

安装或使用 materialize CSS 的第二种方式是使用 CDN 版本，然后将这些 CDN 链接包含在脚本标签中，之后你就可以使用 materialize CSS 的所有功能。

让我们看看另一个例子，以了解 materialize CSS 中面包屑的类别。

例子

在这个例子中，我们将使用当前活动的面包屑的位置来创建一个简单的面包屑。

制作面包屑的代码如下

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Example</title>
      <style>
         .breadcrumb {
            background-color: rgb(255, 99, 71); /* tomato */
            background-color: hsl(9, 100%, 64%); /* tomato */
            background-color: #ff6347; /* tomato */
            background-color: rgba(255, 99, 71, 0.5); /* tomato with 50% transparency */
            font-family: Arial, sans-serif;
            padding: 0 50px ;
         }
      </style>
   </head>
   <body>
      <nav class="red">
         <div class="nav-wrapper">
            <div class="col s12">
               <a href="#!" class="breadcrumb">First</a>
               <a href="#!" class="breadcrumb">Second</a>
               <a href="#!" class="breadcrumb">Third</a>
            </div>
         </div>
      </nav>
   </body>
</html>

在上述代码中，我们首先添加了 materialize CSS CDN 和一些外部字体，然后开始了我们的 HTML 代码，在代码中，我们起诉了 breadcrumb 类，添加了三个链接，然后改变了 nav-wrapper。