素材巴巴 > 程序开发 >

bootstrap面包屑导航(Breadcrumbs)

程序开发 2023-09-13 10:27:32

在网页上常常有一种可以记录我们浏览过的网页的位置的一种导航栏:
在这里插入图片描述
这样的导航栏我们称之为面包屑导航(Breadcrumbs)。面包屑导航(BreadcrumbNavigation)这个概念来自童话故事“汉赛尔和格莱特”,当汉赛尔和格莱特穿过森林时,不小心迷路了,但是他们发现在沿途走过的地方都撒下了面包屑,让这些面包屑来帮助他们找到回家的路。所以,面包屑导航的作用是告诉访问者他们目前在网站中的位置以及如何返回。
Bootstrap 中的面包屑导航(Breadcrumbs)是一个简单的带有 .breadcrumb class 的无序列表。分隔符会通过 CSS(bootstrap.min.css)中下面所示的 class 自动被添加:

.breadcrumb > li + li:before {color: #CCCCCC;content: "/ ";padding: 0 5px;
 }
 

 //a标签内可以连接对应的网址
 

运行结果如下图所示:
在这里插入图片描述
面包屑导航为我们提供了能快速回到我们之前访问过的页面的地址,当我们需要返回时直接点击地址就能到达,能够大大增加用户的体验。


标签:

上一篇: airsim IMU仿真 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。