Bootstrap源码解读（第六弹：导航）

基础样式

制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。例如：

<ul class="nav">
    <li><a href="##">1</a></li>
    <li><a href="##">2</a></li>
    <li><a href="##">3</a></li>
</ul>

实现源码：

.nav {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.nav> li {
  position: relative;
  display: block;
}
.nav> li > a {
  position: relative;
  display: block;
  padding: 10px 15px;
}
.nav> li >a:hover,
.nav> li >a:focus {
  text-decoration: none;
  background-color: #eee;
}
.nav>li.disabled> a {
  color: #999;
}
.nav>li.disabled>a:hover,
.nav>li.disabled>a:focus {
  color: #999;
  text-decoration: none;
  cursor: not-allowed;
  background-color: transparent;
}
.nav .open > a,
.nav .open >a:hover,
.nav .open >a:focus {
  background-color: #eee;
  border-color: #428bca;
}
.nav .nav-divider {
  height: 1px;
  margin: 9px 0;