4.6　导航

源码文件：navs.less

CSS文件：bootstrap.css 4070行以后

导航（Nav）是一个网站最重要的组成部分，可以便于用户查找网站所提供的各项功能服务。导航的制作方法五花八门，本节我们要讲述最常用的导航功能。本节提供的nav样式和btn样式一样，可以通过应用多种附加样式实现多种特效。

和默认的.btn样式不同，默认的.nav样式不提供默认的导航，必须通过附加另外一个样式才行，比如.nav-tabs样式表示选项卡导航。

.nav基础样式主要是设置布局方式（相对）、块级显示、padding、active、disabled状态下的颜色等基础设置。主要代码如下：

  1. // 源码3457行
  2. .nav {
  3.   padding-left: 0;
  4.   margin-bottom: 0; 
  5.   list-style: none;             /*消除list圆点*/
  6. }
  7. .nav > li {
  8.   position: relative;           /*所有的菜单项都是相对定位*/
  9.   display: block;                       /* 块级显示*/
  10. }
  11. .nav > li > a {
  12.   position: relative;           /* a链接相对定位*/
  13.   display: block;                       /* 块级显示*/
  14.   padding: 10px 15px;           /* 外边距保留稍微大一些*/
  15. }
  16. .nav > li > a:hover,
  17. .nav > li > a:focus {           /* 移动或焦点时链接的显示效果*/
  18.   text-decoration: none;
  19.   background-color: #eee;               /* 移动或焦点时，背景色变为灰色*/
  20. }
  21. .nav > li.disabled > a {
  22.   color: #999;                  /* li上禁用时的链接颜色*/
  23. }
  24. .nav > li.disabled > a:hover,
  25. .nav > li.disabled > a:focus {  /* li上禁用时，移动到链接上时的各种处理*/
  26.   color: #999;                  /* 颜色变灰*/
  27.   text-decoration: none;
  28.   cursor: not-allowed;
  29.   background-color: transparent;
  30. }
  31. /* 省略部分样式*/
  32. .nav > li > a > img {
  33.   max-width: none;              /* 如果a链接里是img图片，则不设置最大宽度*/
  34. }