Materialize CSS中的面包屑有哪些类别？-html教程-PHP中文网

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

PHPz

发布： 2023-08-19 20:17:10

转载

745人浏览过

materialize css中的面包屑有哪些类别？

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

In this article we are going to have a look at the classes of breadcrumb in materialize CSS?

在Materialize CSS中的面包屑类别

在Materialize CSS中存在的CSS类用于轻松创建面包屑。使用的类包括 -

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

立即学习“前端免费学习笔记（深入）”；

nav-wrapper class − This class is used to set the component of the nav to breadcrumb.

让我们来看一下在Materialize CSS中创建面包屑的语法

Syntax

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

登录后复制

In the above example you can see that we first opened a nav tag and then created a class nav-wrapper after which we created 3 different anchor tags and gave them the breadcrumb class.

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

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

Note − There are different ways to install materialize CSS. One way is to go to the official website of the materialize CSS and then download the latest version available in which you would have to download the materialize.min.js and materialize.min.css in the directory where your project is stored.

The second way to install or use the materialize CSS is by using the CDN versions and then including these CDN links inside the script tag and after which you can use all of the features of the materialize CSS.

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

Example

的中文翻译为：

示例

In this example we will be creating a simple breadcrumb by using the current location of the breadcrumb that is active.

制作面包屑的代码如下：

<!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 is a front-end framework which is based on material design and is responsive as the developer can use custom components and animations and transitions and then focuses on the user experience as the framework provides the user a responsive system across all the platforms which are available to the user.

有各种主题可以用于实现CSS，并且有详细的示例，使其易于使用。