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%20example" 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，并且有详细的示例，使其易于使用。
Conclusion
Materialize CSS是一种将设计与创新和技术相结合的语言，由谷歌设计，旨在为所有平台提供精细的用户体验。面包屑是内置在Materialize CSS中的一个组件。当有大量内容时，可以使用各种类来轻松创建面包屑。
In this article we saw what are the classes of the breadcrumb in the materialize CSS and what is materialize CSS.
以上就是Materialize CSS中的面包屑有哪些类别？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » Materialize CSS中的面包屑有哪些类别？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
