面包屑(Breadcrumb)一般用于導航，主要是起的作用是告訴用戶現在所處頁面的位置（當前位置）。在Bootstrap框架中面包屑也是一個獨立模塊組件：

• LESS版本：對應源文件breadcrumbs.less
• Sass版本：對應源文件_breadcrumbs.scss
• 編譯出來的版本：源碼對應bootstrap.css文件第4112行～第4129行

使用方法：

使用方式就很簡單，為ol加入breadcrumb類：

<ol class="breadcrumb">
  <li><a href="#">首頁</a></li>
  <li><a href="#">我的書</a></li>
  <li class="active">《圖解CSS3》</li>
</ol>

實現原理：

看來不錯吧！作者是使用li+li:before實現li與li之間的分隔符，所以這種方案在IE低版本就慘了（不支持）。

/*源碼查看bootstrap.css文件第4112行～第4129行*/

.breadcrumb {
padding: 8px 15px;
margin-bottom: 20px;
list-style: none;
background-color: #f5f5f5;
border-radius: 4px;
}

.breadcrumb> li {
display: inline-block;
}

.breadcrumb> li + li:before {
padding: 0 5px;
color: #ccc;
content: "/\00a0";
}

.breadcrumb> .active {
color: #999;
}