bootstrap面包屑导航（Breadcrumbs）

在网页上常常有一种可以记录我们浏览过的网页的位置的一种导航栏:

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

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

• color 字体颜色
• content 将不同的li中的内容隔开所用的符号
• padding 内边距 上下为0 左右为5。调整每个li之间的距离

<ul class="breadcrumb">
    <li><a href="#">首页</a></li>
    <li><a href="#">演示</a></li>
    <li class="active">导航元素</li>
</ul>
//a标签内可以连接对应的网址

运行结果如下图所示：

面包屑导航为我们提供了能快速回到我们之前访问过的页面的地址，当我们需要返回时直接点击地址就能到达，能够大大增加用户的体验。