Bootstrap 面包屑导航

面包屑导航（Breadcrumb）显示当前页面在站点层级中的位置，例如"首页 > 新闻 > 行业动态"，帮助用户理解身处何处并能逐级返回。它是一串带分隔符的链接列表，不是按钮也不是菜单。

基本用法

在 ol 或 ul 上加 breadcrumb，每个层级放一个 li > a；当前页用 active 标记且不写链接。

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">教程</a></li>
  <li class="active">Bootstrap 教程</li>
</ol>
<!-- 效果：灰底圆角条上依次显示 首页 / 教程 / Bootstrap 教程，分隔符为斜杠 -->

注意：active 项没有 a 标签，Bootstrap 会自动去掉它后面的分隔符并转为灰色文字，表示"当前就停在这一层"。

分隔符的由来

分隔符并不写在 HTML 里，而是 CSS 用 ::before 伪元素生成的斜杠。想改成其他符号，只需覆盖样式：

<style>
.breadcrumb > li + li::before {
  content: ">";
  color: #999;
}
</style>
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li class="active">帮助中心</li>
</ol>
<!-- 效果：默认斜杠 "/" 被替换成 ">" 分隔符 -->

与导航配合使用

面包屑常与导航栏同屏出现：顶部导航管"去哪"，面包屑管"现在在哪"。两者结构独立，直接上下排列即可。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">网上商城</a>
  </div>
</nav>
<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">手机数码</a></li>
  <li class="active">智能手机</li>
</ol>
<!-- 效果：导航条下方紧贴一条面包屑，当前所处层级一目了然 -->

小结

面包屑用 breadcrumb 列表加 active 当前项即可成型，分隔符由 CSS 自动生成、可随时更换，是大型站点信息架构里成本最低的导航辅助。