膠囊形（pills）導(dǎo)航聽起來有點(diǎn)別扭，因?yàn)槠渫庑慰雌饋碛悬c(diǎn)像膠囊形狀。但其更像我們平時(shí)看到的大眾形導(dǎo)航。當(dāng)前項(xiàng)高亮顯示，并帶有圓角效果。其實(shí)現(xiàn)方法和“nav-tabs”類似，同樣的結(jié)構(gòu)，只需要把類名“nav-tabs”換成“nav-pills”即可：

<ul class="nav nav-pills">
      <li class="active"><a href="##">Home</a></li>
      <li><a href="##">CSS3</a></li>
      <li><a href="##">Sass</a></li>
      <li><a href="##">jQuery</a></li>
      <li class="disabled"><a href="##">Responsive</a></li>
</ul>

實(shí)現(xiàn)效果樣式代碼：

/*源碼請(qǐng)查閱bootstrap.css文件第3563行～第3577行*/

.nav-pills > li {
  float: left;
}
.nav-pills > li > a {
  border-radius: 4px;
}
.nav-pills > li + li {
  margin-left: 2px;
}
.nav-pills >li.active> a,
.nav-pills >li.active>a:hover,
.nav-pills >li.active>a:focus {
color: #fff;
  background-color: #428bca;
}