Materialize CSS 中的 breadcrumb 类有哪些?


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>

在上面的示例中,您可以看到我们首先打开了一个 nav 标签,然后创建了一个名为 nav-wrapper 的类,之后我们创建了 3 个不同的锚标签并为它们提供了 breadcrumb 类。

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

示例

我们将在示例中采用的方法是创建一个简单面包屑,这意味着 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 链接,之后您可以使用 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。

什么是 Materialize CSS?

Materialize CSS 是一个基于 Material Design 的前端框架,并且具有响应性,因为开发人员可以使用自定义组件、动画和过渡,然后专注于用户体验,因为该框架为用户提供了跨所有可用平台的响应式系统。

可以使用各种主题来实现 Materialize CSS,并且它有详细的示例,使用起来很容易。

结论

Materialize CSS 是一种将设计与创新和技术相结合的语言,由 Google 设计,旨在为所有平台提供完善的用户体验。面包屑是内置于 Materialize CSS 中的一个组件。当内容很多时会使用面包屑,并且可以使用各种类轻松创建面包屑。

在本文中,我们了解了 Materialize CSS 中面包屑的类以及什么是 Materialize CSS。

更新于: 2023年2月24日

158 次查看

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告