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。