Bootstrap每天必学之导航
1、导航（基础样式）
导航对于⼀位前端⼈员来说并不陌⽣。可以说导航是⼀个⽹站重要的元素组件之⼀，可以便于⽤户查⽹站所提供的各项功能服务。导航的制作⽅法也是千奇百怪，五花⼋门。在这⼀节中将向⼤家介绍如何使⽤Bootstrap框架制作各式各样的导航。
在Bootstrap框架将导航独⽴出来成为⼀个导航组件，根据不同的版本，可以到对应的源码：
☑ LESS版本：对应的源⽂件是navs.less
☑ Sass版本：对应的源⽂件是_navs.scss
☑编译后版本：对应源码是bootstrap.css⽂件第3450⾏～第3641⾏
导航基础样式
Bootstrap框架中制作导航条主要通过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另外⼀个样式才会有效，⽐如“nav-tabs”、“nav-pills”之类。⽐如⼀个tab导航条的例⼦，他的实现⽅法就是为ul标签加⼊.nav和nav-tabs两个类样式。
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
/源码请查阅bootstrap.css⽂件第3450⾏~第3493⾏/
.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;
overflow: hidden;
background-color: #e5e5e5;
}
.nav> li > a >img {
max-width: none;
}
2、导航（标签形tab导航）
标签形导航，也称为选项卡导航。特别是在很多内容分块显⽰的时，使⽤这种选项卡来分组⼗分适合。
标签形导航是通过“nav-tabs”样式来实现。在制作标签形导航时需要在原导航“nav”上追加此类名，如：
<ul class="nav nav-tabs">
<li><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
运⾏的效果如下所⽰：
实现原理⾮常的简单，将菜单项（li）按块显⽰，并且让他们在同⼀⽔平上排列，然后定义⾮⾼亮菜单的样式和⿏标悬浮效果。代码如下：
/源码请查阅bootstrap.css⽂件第3494⾏～第3509⾏/
.nav-tabs {
border-bottom: 1px solid #ddd;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
}
.nav-tabs > li > a {
margin-right: 2px;
line-height: 1.42857143;
border: 1px solid transparent;
border-radius: 4px 4px 0 0;
}
.nav-tabs > li >a:hover {
border-color: #eee #eee #ddd;
}
其实上例的效果和我们平时看到的选项卡效果并不⼀致。⼀般情况之下，选项卡教会有⼀个当前选中项。其实在Bootstrap框架也相应提供了。假设我们想让“Home”项为当前选中项，只需要在其标签上添加类名“class="active"”即可：
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
</ul>
运⾏效果如下：
对应样式代码如下：
/源码请查阅bootstrap.css⽂件第3510⾏～第3518⾏/
.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: 1px solid #ddd;
border-bottom-color: transparent;
}
除了当前项之外，有的选项卡还带有禁⽤状态，实现这样的效果，只需要在标签项上添加“class=”disabled””即可：
<ul class="nav nav-tabs">
<li class="active"><a href="##">Home</a></li>
…
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
运⾏效果如下：
实现这个效果的样式，在默认样式“.nav”中就带有：
/源码请查看bootstrap.css⽂件第3469⾏～第3478⾏/
.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;
}
注意：我们看到的选项卡效果，点击菜单项就可以切换内容，如果要实现这样的效果需要配合js插件，这部分将在后⾯的博客中会介绍。
3、导航（胶囊形(pills)导航）
胶囊形（pills）导航听起来有点别扭，因为其外形看起来有点像胶囊形状。但其更像我们平时看到的⼤众形导航。当前项⾼亮显⽰，并带有圆⾓效果。其实现⽅法和“nav-tabs”类似，同样的结构，只需要把类名“nav-tabs”换成“nav-pills”即可：
<ul class="nav nav-pills">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
实现效果样式代码：
/源码请查阅bootstrap.css⽂件第3563⾏～第3577⾏/
.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;
}
4、导航（垂直堆叠的导航）
在实际运⽤当中，除了⽔平导航之外，还有垂直导航，就类似前⾯介绍的垂直排列按钮⼀样。制作垂直堆叠导航只需要
在“nav-pills”的基础上添加⼀个“nav-stacked”类名即可(stacked就是堆的意思)：
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
运⾏效果如下：
垂直堆叠导航与胶囊形导航相⽐，主要是让导航项不浮动，让其垂直排列，然后给相邻导航项留有⼀定的间距：
/源码请查阅bootstrap.css⽂件第3578⾏～第3584⾏/
.nav-stacked > li {
float: none;
}
.nav-stacked > li + li {
margin-top: 2px;
margin-left: 0;
}
⼤家是否还记得，在下拉菜单⼀节中，下拉菜单组与组之间有⼀个分隔线。其实在垂直堆叠导航也具有这样的效果，只需要添加在导航项之间添加“<li class=”nav-divider”></li>”即可：
<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li class="nav-divider"></li>
<li class="disabled"><a href="##">Responsive</a></li>
</ul>
运⾏效果如下：
实现样式：
/源码请查阅bootstrap.css⽂件第3485⾏～3490⾏/
.nav .nav-divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #e5e5e5;
}
或许你会问，如果我在”nav-tabs”上添加“nav-stacked”是不是也能实现垂直的标签选项导航呢？答案是：
在bootstrap V2.x版本可以，但在Bootstrap V3.x版本将这个效果取消了，可能作者觉得垂直选择项并不太常见，也不美观吧。
4、⾃适应导航（使⽤）
⾃适应导航指的是导航占据容器全部宽度，⽽且菜单项可以像表格的单元格⼀样⾃适应宽度。⾃适应导航和前⾯使⽤“btn-group-justified”制作的⾃适应按钮组是⼀样的。只不过在制作⾃适应导航时更换了另⼀个类名“nav-justified”。当然他需要
和“nav-tabs”或者“nav-pills”配合在⼀起使⽤。如：
<ul class="nav nav-tabs nav-justified">
<li class="active"><a href="##">Home</a></li>
<li><a href="##">CSS3</a></li>
<li><a href="##">Sass</a></li>
<li><a href="##">jQuery</a></li>
<li><a href="##">Responsive</a></li>
</ul>
运⾏效果如下：
⾃适应导航（实现原理）
实现原理并不难，列表（<ul>）上设置宽度为“100%”，然后每个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显⽰：
/源码请查阅bootstrap.css⽂件第3585⾏～第3607⾏/
.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;
}
}
这⾥有⼀个媒体查询条件：“@media (min-width:768px){…}”表⽰⾃适应导航仅在浏览器视窗宽度⼤于768px才能按上图风格显⽰。当你的浏览器视窗宽度⼩于768px的时候，将会按下图的风格展⽰：
从上图效果可以得知，“nav-tabs”和“nav-justified”配合在⼀起使⽤，也就是⾃适应选项卡导航，浏览器视窗宽度⼩于768px 时，在样式上做了另外的处理。
/源码请查阅bootstrap.css⽂件第3519⾏～第3562⾏/
.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%;
}jquery在一个元素后追加标签
.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: 1px solid #ddd;
}
@media (min-width: 768px) {
.nav-tabs.nav-justified > li > a {
border-bottom: 1px solid #ddd;
border-radius: 4px 4px 0 0;
}
.nav-tabs.nav-justified > .active > a,
.nav-tabs.nav-justified > .active >a:hover,
.nav-tabs.nav-justified > .active >a:focus {
border-bottom-color: #fff;
}
}
5、导航加下拉菜单（⼆级导航）
前⾯介绍的都是使⽤Bootstrap框架制作⼀级导航，但很多时候，在Web页⾯中是离不开⼆级导航的效果。那么在Bootstrap框架中制作⼆级导航就更容易了。只需要将li当作⽗容器，使⽤类名“dropdown”，同时在li中嵌套另⼀个列表ul，使⽤前⾯介绍下拉菜单的⽅法就可以：
<ul class="nav nav-pills">

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。