0

0

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

PHPz

PHPz

发布时间:2023-08-19 20:17:10

|

800人浏览过

|

来源于tutorialspoint

转载

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


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将指向面包屑页面。让我们来看看代码



   
      Example of breadcrumb CSS
      
   
   
      
   

在上面的示例中,我们使用了“breadcrumb”类,它帮助我们锚定了位于“nav”元素中的元素。用户可以使用不同的类,如“cyan”或“light-blue”来更改面包屑的颜色,或者如果用户想要将面包屑的位置更改为右侧,则可以使用“right”类。

汇成机械行业企业网站系统11.2
汇成机械行业企业网站系统11.2

拥有企业网站常用的模块功能:企业简介模块、联系我们模块、新闻(文章)模块、产品模块、图片模块、招聘模块、在线留言、反馈系统、在线交流、友情链接、网站地图、栏目管理、网站碎片、管理员与权限管理等等,所有模块的分类均支持无限级别的分类,可拓展性非常强大。其中包括万能的栏目管理系统、网站碎片管理系统,通过这些系统,可以组合出各种不同的页面和应用。系统带强大灵活的后台管理功能、支持伪静态URL页面功能、自

下载

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.

制作面包屑的代码如下:



   
      Example
      
   
   
      
   

在上面的代码中,我们首先添加了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.

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
css
css

css是层叠样式表,用来表现HTML或XML等文件样式的计算机语言,不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。php中文网还为大家带来html的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

524

2023.06.15

css居中
css居中

css居中:1、通过“margin: 0 auto; text-align: center”实现水平居中;2、通过“display:flex”实现水平居中;3、通过“display:table-cell”和“margin-left”实现居中。本专题为大家提供css居中的相关的文章、下载、课程内容,供大家免费下载体验。

267

2023.07.27

css如何插入图片
css如何插入图片

cssCSS是层叠样式表(Cascading Style Sheets)的缩写。它是一种用于描述网页或应用程序外观和样式的标记语言。CSS可以控制网页的字体、颜色、布局、大小、背景、边框等方面,使得网页的外观更加美观和易于阅读。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

759

2023.07.28

css超出显示...
css超出显示...

在CSS中,当文本内容超出容器的宽度或高度时,可以使用省略号来表示被隐藏的文本内容。本专题为大家提供css超出显示...的相关文章,相关教程,供大家免费体验。

539

2023.08.01

css字体颜色
css字体颜色

CSS中,字体颜色可以通过属性color来设置,用于控制文本的前景色,字体颜色在网页设计中起到很重要的作用,具有以下表现作用:1、提升可读性;2、强调重点信息;3、营造氛围和美感;4、用于呈现品牌标识或与品牌形象相符的风格。

761

2023.08.10

什么是css
什么是css

CSS是层叠样式表(Cascading Style Sheets)的缩写,是一种用于描述网页(或其他基于 XML 的文档)样式与布局的标记语言,CSS的作用和意义如下:1、分离样式和内容;2、页面加载速度优化;3、实现响应式设计;4、确保整个网站的风格和样式保持统一。

605

2023.08.10

css三角形怎么写
css三角形怎么写

CSS可以通过多种方式实现三角形形状,本专题为大家提供css三角形怎么写的相关教程,大家可以免费体验。

561

2023.08.21

css设置文字颜色
css设置文字颜色

CSS(层叠样式表)可以用于设置文字颜色,这样做有以下好处和优势:1、增加网页的可视化效果;2、突出显示某些重要的信息或关键字;3、增强品牌识别度;4、提高网页的可访问性;5、引起不同的情感共鸣。

397

2023.08.22

菜鸟裹裹入口以及教程汇总
菜鸟裹裹入口以及教程汇总

本专题整合了菜鸟裹裹入口地址及教程分享,阅读专题下面的文章了解更多详细内容。

0

2026.01.22

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号