面包屑(Breadcrumb)一般用于導(dǎo)航，主要是起的作用是告訴用戶現(xiàn)在所處頁(yè)面的位置（當(dāng)前位置）。在Bootstrap框架中面包屑也是一個(gè)獨(dú)立模塊組件：

• LESS版本：對(duì)應(yīng)源文件breadcrumbs.less
• Sass版本：對(duì)應(yīng)源文件_breadcrumbs.scss
• 編譯出來(lái)的版本：源碼對(duì)應(yīng)bootstrap.css文件第4112行～第4129行

使用方法：

使用方式就很簡(jiǎn)單，為ol加入breadcrumb類：

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

實(shí)現(xiàn)原理：

看來(lái)不錯(cuò)吧！作者是使用li+li:before實(shí)現(xiàn)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;
}