布尔玛面包屑图标介绍

简介

布尔玛面包屑图标（Breadcrumbs）是一种在网页中用来显示当前页面在网站导航结构中所处位置的小型导航元素。它由一系列链接组成，通常以“>”符号隔开，形如“首页 > 分类目录 > 二级分类 > 当前页面”。

在布局上，面包屑通常出现在页面的顶部或者页面主体内容的上方，与导航栏或标签页等其它导航元素相伴出现，提高了访问者的导航体验。

布尔玛面包屑图标的名字来源于在焦克·约翰纳森·库姆斯（Jock Kinneir）和玛格丽特·卡尔维（Margaret Calvert）在20世纪50年代设计的英国高速公路信号系统中使用的字体。

原理

面包屑导航的实现原理比较简单。其主要包括两个部分：

1. 文件位置层级获取

在页面加载时，通常需要对该页面在网站导航结构中所处位置进行获取。实现该部分功能的方式是对页面URL路径进行处理，找到对应的导航路径。

2. 导航路径展示

将获取到的面包屑导航路径信息以一定格式（一般为“>”符号隔开）展示在页面上，形成面包屑导航。

实现

实现布尔玛面包屑图标需要使用 HTML、CSS 和 JavaScript。下面是一个基本的 HTML 结构：

<div class="breadcrumb">
  <a href="#">首页</a> > <a href="#">分类目录</a> > <a href="#">二级分类</a> > 当前页面
</div>

利用 CSS，我们可以对面包屑导航的样式进行定制：

.breadcrumb a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}
.breadcrumb a:hover {
  text-decoration: underline;
}

对于面包屑导航的自动获取和生成，可以使用 jQuery 插件 jquery-breadcrumbs。只需要简单的引入库文件，并调用相应的函数即可实现自动导航的效果。

优点

1. 提高导航体验

面包屑导航可以更加清晰的展示当前页面在网站导航结构中所处的位置，方便用户进行页面之间的快速切换。

2. 提高页面权重

面包屑导航是一种内部链接，可以方便的增加页面之间的链接交叉度，提高页面的权重。

总结

布尔玛面包屑图标是一种提高导航体验和页面权重的简单、易用的导航元素。合理使用面包屑导航可以提高网站的用户体验，降低页面跳出率，是一种不可忽视的重要设计元素。