Materialize CSS 中的面包屑导航 (Breadcrumb) 类有哪些?

htmlcssweb developmentfront end technology更新于 2025/1/30 15:08:17

Materialize 是一个用于设计的 CSS 框架，它运用经典设计原则，并将其与创新技术相结合。Materialize 的创建者是谷歌，他们开发了一套设计系统，无论用户使用何种平台，都能为所有类型的产品中的所有用户提供统一的用户体验。面包屑导航 (Breadcrumbs) 是 Materialize CSS 内置的一个组件，主要用于存在大量层级的情况，以便显示用户当前操作的位置，无论是在网站还是 Web 应用上。

在本文中，我们将了解 Materialize CSS 中的面包屑导航 (Breadcrumb) 类有哪些?

Materialize CSS 中的面包屑导航 (Breadcrumb) 类

Materialize CSS 中的 CSS 类可用于轻松创建面包屑导航 (Breadcrumb)。使用的类为 -

面包屑类 - 面包屑类用于显示最后一个锚标签处于活动状态，其余锚标签显示为灰色。

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

为了更好地理解 breadcrumb 的概念，我们来看一个例子

示例

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

<!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 代码。在 HTML 代码中，我们使用了 breadcrumb 类，添加了三个链接，并更改了 nav-wrapper。

什么是 Materialize CSS?

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

Materialize CSS 有多种主题可供使用，并提供了详细的示例，使其易于使用。

结论

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

在本文中，我们了解了 Materialize CSS 中面包屑导航的类有哪些，以及什么是 Materialize CSS。

有用资源

html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/

打印下一节:使用 HTML 和 CSS 创建字母间距动画效果 ❯❮ 上一节:如何使用 HTML 和 CSS 创建滑动文本显示动画?

技术文章和资源

热门类别

Materialize CSS 中的面包屑导航 (Breadcrumb) 类有哪些?