一、bootstrap中的面包屑breadcrumb是什么?
bootstrap路径组件也叫面包屑导航breadcrumb。在为 Web 应用程序生成 UI 时,首要工作之一是设计 Web 站点的总体结构,包括所有站点导航。导航控件通常放在 Web 页的左侧或顶部,并且可能包括日益流行的 Breadcrumb 导航(它显示了用户必须预先经过的路径),从而创建总体菜单系统。
一个“面包屑”(或“面包线索”)是一个类型为二级导航方案,揭示了网站或网页应用程序 中用户的所在位置。这个词来自汉赛尔与格莱特童话故事中,两个孩子丢下面包屑,形成一条小径回到自己的家。就像在童话,应用面包屑在现实世界的用户提供一种方法来跟踪路径返回到原来的着陆点。
——《在网页设计 面包屑:实例和最佳做法》
面包屑是作为辅助和补充的导航方式(secondary navigation scheme),它能让用户知道在网站或应用中所处的位置并能方便地回到原先的地点。
二、面包屑即路径组件的现状及分类
很多互联网网络公司 在建站 之初就采用了面包屑导航做为网站产品线的“标准配置”,现在被越来越多的行业网站所认可及采用。
1.基于用户所在的层级位置(Location-based)
bootstrap路径组件breadcrumb面包屑用于告知用户在当前网站中所在的结构层级。用在具有多级导航中。如下例:
<ol class="breadcrumb">
<li><a href="https://www.cdxwcx.com/">创新互联</a></li>
<li><a href="https://www.cdxwcx.com/wangzhan/">网站建设</a></li>
<li><a href="https://www.cdxwcx.com/qianduan/">网页前端设计</a></li>
<li class="active">bootstrap</li>
</ol>
2.基于产品的属性(Attribute-based)
产品的属性的面包屑常出现在具有大量类别产品和服务的网站中,如电子商务、购物网等。
如:虚拟主机 > 独立IP空间 > PHP独立IP空间
3.基于用户的足迹(Path-based)
显示用户浏览的轨迹,面包屑之间没有明显的层级关系,只是展示用户从那个级别过来的。这种面包屑在一级导航方案不明确的网站适合,其他情况不建议采用。
bootstrap路径组件breadcrumb面包屑的好处
通过上面的案例研究以及面包屑的分类,我们可以看到采用面包屑功能的好处:
1.面包屑作为用户寻找路径的一种辅助手段,能方便他们定位和导航。
2.面包屑可以减少的用户返回上一级页面的所需的操作次数。
3.临时性,动态性,占用屏幕空间小,干扰性小。
4.降低网站访问者的总体跳出率。
当用户从别处链接 到网页,或者从搜索引擎查找到网页,则面包屑的存在能帮助用户快速了解当前的层级位置,并引导用户查看网站的其余部分,减少了看完直接跳走的用户数量。