首页　>　文章列表　>　Materialize CSS中的面包屑有哪些类别？

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

343 2023-09-16

Materialize是一个用于设计的CSS框架，它使用经典原则并将其与创新和技术相结合。Materialize的创建者是谷歌，他们开发了一个设计系统，可以为每个用户在任何类型的产品中提供统一的用户体验，无论用户使用的平台是什么。Breadcrumbs是一个在Materialize CSS中内置的组件，当有很多层级时，它主要用于显示用户当前的位置，无论是在网站上还是在Web应用程序上。

在本文中，我们将了解 Materialise 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 个不同的锚标记并为它们提供了面包屑类。

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

Example

的中文翻译为：

示例

在示例中，我们将采用的方法是创建一个简单的面包屑，这意味着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”类。

注意 - 安装 Materialise CSS 的方法有多种。一种方法是访问materialize CSS的官方网站，然后下载可用的最新版本，其中您必须将materialize.min.js和materialize.min.css下载到您的项目存储的目录中。

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

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

Example

的中文翻译为：

示例

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

制作面包屑的代码如下：

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