Materialize CSS中的面包屑类有哪些

Materialize是一个用于设计的CSS框架，它使用经典原则与创新和技术相结合。Materialize的创造者是Google，他们开发了一个设计系统，可以在任何类型的产品上为每个用户提供统一的用户体验，无论用户使用的平台是什么。面包屑是Materialize CSS中内置的一个组件，当存在许多层次时，最常用于显示用户当前的位置，无论是在网站上还是在Web应用程序上。

在本文中，我们将了解Materialize CSS中面包屑的类。

Materialize CSS中的面包屑类

Materialize CSS中的CSS类可用于轻松创建面包屑。使用的类包括：

面包屑类 - 面包屑类用于显示最后一个锚点标签处于活动状态，其余的标签都被灰化。

nav-wrapper类 - 这个类用于将导航组件设置为面包屑。

让我们来看看在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>

在上面的示例中，您可以看到我们首先打开了一个导航标签，然后创建了一个类导航封装器，之后我们创建了3个不同的锚标签并为它们提供了breadcrumb类。

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

示例1

在示例中，我们将采用创建一个简单的面包屑的方法，这意味着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”元素中的元素。用户可以使用不同的类，如“cyan”或“light-blue”来更改面包屑的颜色，或者如果用户想要将面包屑定位到右侧，则可以使用“right”类。

注意 − 安装materialize CSS有不同的方法。一种方法是访问materialize CSS的官方网站，然后下载最新版本，在其中下载materialize.min.js和materialize.min.css文件，将其存储在项目所在的目录中。

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

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

示例2

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

用于创建面包屑的代码如下所示−

<!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。