Bootstrap源码解读导航（6）
源码解读Bootstrap导航
基础样式
制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外一个样式才会有效，比如“nav-tabs”、“nav-pills”之类。例如：
<ulclass="nav"> <li><ahref="##">1</a></li> <li><ahref="##">2</a></li> <li><ahref="##">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:10px15px;
}
.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:9px0;
overflow:hidden;
background-color:#e5e5e5;
}
.nav>li>a>img{
max-width:none;
}
标签形tab导航
原导航“nav”上追加“nav-tabs”类名即可，例如：<ulclass="navnav-tabs">...</ul>。
实现原理是将菜单项（li）按块显示，并且让他们在同一水平上排列，然后定义非高亮菜单的样式和鼠标悬浮效果。实现源码如下：
.nav-tabs{
border-bottom:1pxsolid#ddd;
}
.nav-tabs>li{
float:left;
margin-bottom:-1px;
}
.nav-tabs>li>a{
margin-right:2px;
line-height:1.42857143;
border:1pxsolidtransparent;
border-radius:4px4px00;
}
.nav-tabs>li>a:hover{
border-color:#eee#eee#ddd;
}
要让哪个项是选中项，只需要在其标签上添加类名“class=”active”即可。
实现源码如下：
.nav-tabs>li.active>a,
.nav-tabs>li.active>a:hover,
.nav-tabs>li.active>a:focus{
color:#555;
cursor:default;
background-color:#fff;
border:1pxsolid#ddd;
border-bottom-color:transparent;
}
要让哪个项禁用，只需要在标签项上添加“class=”disabled”即可。实现源码如下：
.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;
}
胶囊形pills导航
原导航“nav”上追加“nav-pills”类名即可，例如：<ulclass="navnav-pills">...</ul>。
实现源码如下：
.nav-pills>li{
float:left;
}
.nav-pills>li>a{
border-radius:4px;
}
.nav-pills>li+li{
margin-left:2px;
}
.nav-pills>li.active>a,
.nav-pills>li.active>a:hover,
.nav-pills>li.active>a:focus{
color:#fff;
background-color:#428bca;
}
垂直导航
制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“nav-stacked”类名即可。例如：
<ulclass="navnav-pillsnav-stacked">...</ul>
垂直导航与胶囊形导航相比，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有一定的间距。
实现源码如下：
.nav-stacked>li{
float:none;
}
.nav-stacked>li+li{
margin-top:2px;
margin-left:0;
}
要在导航项之间加分隔线，在导航项之间加<liclass=”nav-divider”></li>即可。
实现源码如下：
.nav.nav-divider{
height:1px;
margin:9px0;
overflow:hidden;
background-color:#e5e5e5;
}
自适应导航
在“nav”上追加一个“nav-justified”类名即可。例如：<ulclass="navnav-justified">
实现原理是，列表<ul>上设置宽度为“100%”，然后每个菜单项<li>设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示。实现源码如下：
.nav-justified{
width:100%;
}
.nav-justified>li{
float:none;
}
.nav-justified>li>a{
margin-bottom:5px;
text-align:center;
}
.nav-justified>.dropdown.dropdown-menu{
top:auto;
left:auto;
}
@media(min-width:768px){
.nav-justified>li{
display:table-cell;
width:1%;
}
.nav-justified>li>a{
margin-bottom:0;
}
}
“nav-tabs”和“nav-justified”配合在一起使用就是自适应选项卡导航，实现源码如下：
.nav-tabs.nav-justified{
width:100%;
border-bottom:0;
}
.nav-tabs.nav-justified>li{
float:none;
}
.nav-tabs.nav-justified>li>a{
margin-bottom:5px;
text-align:center;
}
.nav-tabs.nav-justified>.dropdown.dropdown-menu{
top:auto;
left:auto;
}
@media(min-width:768px){
.nav-tabs.nav-justified>li{
display:table-cell;
width:1%;
}
.nav-tabs.nav-justified>li>a{
margin-bottom:0;
}
}
.nav-tabs.nav-justified>li>a{
margin-right:0;
border-radius:4px;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus{
border:1pxsolid#ddd;
}
@media(min-width:768px){
.nav-tabs.nav-justified>li>a{
border-bottom:1pxsolid#ddd;
border-radius:4px4px00;
}
.nav-tabs.nav-justified>.active>a,
.nav-tabs.nav-justified>.active>a:hover,
.nav-tabs.nav-justified>.active>a:focus{
border-bottom-color:#fff;
}
}
“nav-pills”和“nav-justified”配合在一起使用就是自适应胶囊型导航，原理同上。
导航加下拉菜单
导航加下拉菜单也就是二级导航，只需要将li当作父容器，使用类名“dropdown”，同时在li中嵌套另一个列表ul下拉菜单即可。例如：
<ulclass="navnav-pills"> <li><ahref="##">首页</a></li> <liclass="dropdown"> <ahref="##"class="dropdown-toggle"data-toggle="dropdown">数字<spanclass="caret"></span></a> <ulclass="dropdown-menu"> <li><ahref="##">1</a></li> <li><ahref="##">2</a></li> </ul> </li> <li><ahref="##">关于我们</a></li> </ul>
面包屑式Breadcrumb导航
面包屑不需要使用“nav”，一般作用是告诉用户现在所处页面的位置。为ol加入“breadcrumb”类名即可。例如：
<olclass="breadcrumb"> <li><ahref="#">111</a></li> <li><ahref="#">222</a></li> <liclass="active">333</li> </ol>
实现源码如下：
.breadcrumb{
padding:8px15px;
margin-bottom:20px;
list-style:none;
background-color:#f5f5f5;
border-radius:4px;
}
.breadcrumb>li{
display:inline-block;
}
.breadcrumb>li+li:before{
padding:05px;
color:#ccc;
content:"/\00a0";
}
.breadcrumb>.active{
color:#777;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。