4.21.4　导航条样式主题

由于导航条有两种——navbar-default和navbar-inverse，所以在增强的时候，分别对这两种样式进行修改。以navbar-default为例，增强修改如下。

针对导航条的背景、圆角、阴影的修改如下：

  1. // 源码168行
  2. .navbar-default {
  3.   background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
  4.   background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
  5.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', 
  6.       endColorstr='#fff8f8f8', GradientType=0);
  7.   filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  8.   background-repeat: repeat-x;
  9.   border-radius: 4px;
  10.   -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba
  11.       (0, 0, 0, .075);
  12.           box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba
  13.              (0, 0, 0, .075);
  14. }

针对导航条内的高亮元素链接的背景、阴影的修改如下：

  1. // 源码178行
  2. .navbar-default .navbar-nav > .active > a {
  3.   background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
  4.   background-image:         linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
  5.   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', 
  6.       endColorstr='#fff3f3f3', GradientType=0);
  7.   background-repeat: repeat-x;
  8.   -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
  9.           box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
  10. }

针对Brand和其他相关的阴影的修改如下：

  1. // 源码186行
  2. .navbar-brand,.navbar-nav > li > a {
  3.   text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
  4. }

另外，针对固定状态的几个特殊样式的圆角，也进行了消除设置。源码如下：

  1. // 源码209行
  2. .navbar-static-top,
  3. .navbar-fixed-top,
  4. .navbar-fixed-bottom {
  5.   border-radius: 0;
  6. }