4.7.1　基础导航条

基础导航条是在普通导航的基础上进行改进实现的，但实现原理复杂得多。我们先来看一个普通的例子，首先在普通导航的ul元素上应用.navbar-nav样式，然后在外部父元素容器上应用.navbar样式以及.navbar-default样式即可实现。示例代码如下：

  1. <nav class="navbar navbar-default" role="navigation">
  2.     <div class="navbar-header">
  3.         <a class="navbar-brand" href="#">Brand</a>
  4.     </div>
  5.     <ul class="nav navbar-nav">
  6.         <li class="active"><a href="#">active</a></li>
  7.         <li><a href="#">Link</a></li>
  8.         <li class="disabled"><a href="#">disabled</a></li>
  9.         <li><a href="#">Link</a></li>
  10.     </ul>
  11. </nav>

运行效果如图4-39所示。上述代码里有一个.navbar-brand样式的链接，表示该元素是导航条的名称，起到提醒的目的。

4.7.1　基础导航条 - 图1 图4-39　基础导航条运行效果

注意

要增强可访问性，一定要给每个导航条加上role="navigation"。

在讲解源码之前，我们先大概说一下整个navbar的原理。在整个设计中，.nav、.navbar、

.navbar-nav等是控制大小、内外边距、行距等方面的样式，而颜色则是由.navbar-default和.navbar-inverse这两大风格所控制（本节会讲述.navbar-default风格样式，而.navbar-inverse会放到另一小节讲）。另外由于Bootstrap新版是一个移动先行的前端框架，所以该导航条不仅支持普通的宽屏浏览器，也支持手机的窄屏浏览器，也就是说上述所有的样式，在窄屏和宽屏下都有不同的设置（通过媒体查询实现的）。所以在讲解的时候，先讲解普通的宽屏，然后在另外一个小节“响应式导航条”里再单独讲解窄屏下的实现方式。

.navbar样式的主要功能是设置左右padding、圆角等，但不设置与颜色相关的内容，因为与颜色相关的内容是由.navbar-default样式来控制的。.navbar样式主要源码如下：

  1. // 源码3649行
  2. .navbar {
  3.   position: relative;                   /* 相对定位 */
  4.   min-height: 50px;                     /* 最小高度 */
  5.   margin-bottom: 20px;                  /* 底部的外边距 */
  6.   border: 1px solid transparent;        /* 边框透明 */
  7. }
  8. @media (min-width: 768px) {
  9.   .navbar {    border-radius: 4px;      /* 宽屏时，才设置圆角 */    }
  10. }
  11. @media (min-width: 768px) {
  12.   .navbar-header {    float: left;      /* 宽屏时，header为左浮动 */  }
  13. }

.navbar-nav样式，是在原有.nav样式的基础上（nav和navbar-nav要一起使用），重新调整设置了菜单项链接的浮动和内外边距的设置（不包括颜色，颜色依然是由.navbar-default和.navbar-inverse两大样式设置）。下面是.navbar-nav样式的源码：

  1. // 源码3822行
  2. @media (min-width: 768px) {             /*宽屏情况下*/
  3.   .navbar-nav { 
  4.     float: left;                                /* 左浮动*/
  5.     margin: 0;
  6.   }
  7.   .navbar-nav > li {
  8.     float: left;                                /*菜单项左浮动*/
  9.   }
  10.   .navbar-nav > li > a {                        /*加大上下方向的内边距*/
  11.     padding-top: 15px;
  12.     padding-bottom: 15px;
  13.   }
  14.   .navbar-nav.navbar-right:last-child {
  15.     margin-right: -15px;                        /*向右对齐时最后一个子元素，设置负的margin值*/
  16.   }
  17. }

而作为提醒功能的navbar-brand样式，则主要是加大了字体设置，并控制最大宽度显示。

  1. // 源码3746行
  2. .navbar-brand {
  3.   float: left;                          /*左浮动*/
  4.   height: 20px;
  5.   padding: 15px 15px;
  6.   font-size: 18px;
  7.   line-height: 20px;                    /*增大行间距*/
  8. }
  9. .navbar-brand:hover,
  10. .navbar-brand:focus {
  11.   text-decoration: none;
  12. }

基础的导航条功能，不仅能看到各种各样的菜单定义，还包括当前活动的菜单（active样式）、当前已禁用的菜单（disabled样式），下拉菜单也可以放在里面，如图4-40所示。这是一个比较复杂的基础导航条，我们就这个效果，来一步一步分析.navbar-default样式风格是如何定义的。

4.7.1　基础导航条 - 图2 图4-40　基础导航条的综合应用

完整的.navbar-default风格的源码和注释如下，请大家一定要仔细看注释，并对照查看示例效果。

  1. // 源码3944行
  2. .navbar-default {                               /*设置背景颜色和边框颜色*/
  3.   background-color: #f8f8f8;
  4.   border-color: #e7e7e7;
  5. }
  6. .navbar-default .navbar-brand {  color: #777;  /*设置navbar-brand的文本颜色*/}
  7. .navbar-default .navbar-brand:hover,
  8. .navbar-default .navbar-brand:focus {
  9.   color: #5e5e5e;               /*navbar-brand移动或焦点时的文本颜色和背景颜色*/
  10.   background-color: transparent;
  11. }
  12. .navbar-default .navbar-text {  color: #777;  /*设置navbar-text的文本颜色，下节讲*/}
  13. .navbar-default .navbar-nav > li > a {  color: #777;  /*设置菜单项链接的文本颜色*/}
  14. .navbar-default .navbar-nav > li > a:hover,
  15. .navbar-default .navbar-nav > li > a:focus {
  16.   color: #333;          /*设置菜单项链接在移动或焦点时的文本颜色*/
  17.   background-color: transparent;
  18. }
  19. .navbar-default .navbar-nav > .active > a,
  20. .navbar-default .navbar-nav > .active > a:hover,
  21. .navbar-default .navbar-nav > .active > a:focus {
  22.   color: #555;          /*设置当前活动的菜单项链接的文本颜色和背景颜色*/
  23.   background-color: #e7e7e7;
  24. }
  25. .navbar-default .navbar-nav > .disabled > a,
  26. .navbar-default .navbar-nav > .disabled > a:hover,
  27. .navbar-default .navbar-nav > .disabled > a:focus {
  28.   color: #ccc;          /*设置当前已禁用的菜单项链接的文本颜色和背景颜色*/
  29.   background-color: transparent;
  30. }
  31. .navbar-default .navbar-toggle {  border-color: #ddd;  /*响应式按钮的边框颜色，
  32.                                                                 在4.7.6一节会讲*/}
  33. .navbar-default .navbar-toggle:hover,
  34. .navbar-default .navbar-toggle:focus {
  35.   background-color: #ddd;       /*响应式按钮在移动或者焦点时的背景颜色*/
  36. }
  37. .navbar-default .navbar-toggle .icon-bar {  background-color: #888;
  38.                                 /*响应式按钮里的icon的背景颜色*/}
  39. .navbar-default .navbar-collapse,
  40. .navbar-default .navbar-form {
  41.   border-color: #e7e7e7;        /*折叠边框或者表单样式的边框颜色*/
  42. }
  43. .navbar-default .navbar-nav > .open > a,
  44. .navbar-default .navbar-nav > .open > a:hover,
  45. .navbar-default .navbar-nav > .open > a:focus {
  46.   color: #555;          /*下拉菜单打开时，链接项的文本颜色和背景颜色*/
  47.   background-color: #e7e7e7;
  48. }
  49. @media (max-width: 767px) {
  50.   .navbar-default .navbar-nav .open .dropdown-menu > li > a {
  51.     color: #777;                /*下拉菜单打开时，其里面的子菜单项链接的文本颜色*/
  52.   }
  53.   .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  54.   .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
  55.     color: #333;                /*下拉菜单打开时，其里面的子菜单项链接的文本颜色（移动或焦点时）*/
  56.     background-color: transparent;
  57.   }
  58.   .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  59.   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  60.   .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
  61.     color: #555; ;      /*下拉菜单打开时，其里面的当前活动的子菜单项链接的文本颜色*/
  62.     background-color: #e7e7e7;
  63.   }
  64.   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a,
  65.   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover,
  66.   .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus {
  67.     color: #ccc;                /*下拉菜单打开时，里面的当前已禁用的子菜单项链接的文本颜色*/
  68.     background-color: transparent;
  69.   }
  70. }
  71. .navbar-default .navbar-link {  color: #777;   /*内部链接的文本颜色*/ }
  72. .navbar-default .navbar-link:hover {  color: #333; /*内部链接在鼠标移动时的文本颜色*/ }