4.6.2　胶囊式选项卡导航

同样是上述示例代码，将.nav-tabs样式替换为.nav-pills样式，即可变换成完全不同的效果，当前.active的菜单会进行背景色高亮显示。示例代码如下：

  1. <ul class="nav nav-pills ">
  2.     <li class="active"><a href="#">主页</a></li>
  3.     <li><a href="#">个人信息</a></li>
  4.     <li class="disabled"><a href="#">作品</a></li>
  5.     <li><a href="#">图书</a></li>
  6. </ul>

运行效果如图4-30所示。

4.6.2　胶囊式选项卡导航 - 图1 图4-30　胶囊式选项卡运行效果

这种风格的CSS设置比tab稍简单，只要加大每个li元素的圆角设置和当前li元素的文字颜色及背景色即可。

  1. // 源码3570行
  2. .nav-pills > li {
  3.   float: left;                  /* 左浮动 */
  4. }
  5. .nav-pills > li > a {
  6.   border-radius: 4px;                   /* 圆角设置 */
  7. }
  8. .nav-pills > li + li {
  9.   margin-left: 2px;                     /* 加大左外边距 */
  10. }
  11. .nav-pills > li.active > a,
  12. .nav-pills > li.active > a:hover,
  13. .nav-pills > li.active > a:focus {      /* 高亮菜单设置文字颜色和背景色 */
  14.   color: #fff;                          /* 文字为白色*/
  15.   background-color: #428bca;            /* 背景为蓝色*/
  16. }