Bootstrap导航

前面的话 　　导航对于一位前端人员来讲并不陌生。能够说导航是一个网站重要的元素组件之一，便于用户查找网站所提供的各项功能服务。本文将详细介绍Bootstrap导航
 
基础样式 　　Bootstrap框架中制做导航条主要经过“.nav”样式。默认的“.nav”样式不提供默认的导航样式，必须附加另一个样式才会有效，好比“nav-tabs”、“nav-pills”之类
　　若是在使用导航组件实现导航条功能，务必在 

<ul>

 的最外侧的逻辑父元素上添加 

role="navigation"

 属性，或者用一个 

<nav>

 元素包裹整个导航组件。不要将 role 属性添加到 

<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;
  overflow: hidden;
  background-color: #e5e5e5;
}
.nav> li > a >img {
  max-width: none;
}

<ul class="nav">
  <li><a href="#">Home</a></li>
  <li><a href="#">Profile</a></li>
  <li><a href="#">Messages</a></li>
</ul>

 
选项卡 　　标签形导航，也称为选项卡导航。特别是在不少内容分块显示的时，使用这种选项卡来分组十分适合。标签形导航是经过“nav-tabs”样式来实现。在制做标签形导航时须要在原导航“nav”上追加此类名
　　实现原理很是的简单，将菜单项（li）按块显示，而且让他们在同一水平上排列，而后定义非高亮菜单的样式和鼠标悬浮效果
　　通常状况下，选项卡会有一个当前选中项。其实在Bootstrap框架也相应提供了，只须要在其标签上添加类名"active"。除了当前项以外，有的选项卡还带有禁用状态，实现这样的效果，只须要在标签项上添加类名"disabled"

<ul class="nav nav-tabs">
    <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>

 
胶囊导航 　　胶囊形（pills）导航听起来有点别扭，由于其外形看起来有点像胶囊形状。但其更像咱们平时看到的大众形导航。当前项高亮显示，并带有圆角效果。其实现方法和“nav-tabs”相似，一样的结构，只须要把类名“nav-tabs”换成“nav-pills”便可

.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;
}

<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>

【垂直方向】
　　胶囊式标签页也是能够垂直方向堆叠排列的。只需添加 

.nav-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>

 
自适应导航 　　自适应导航指的是导航占据容器所有宽度，并且菜单项能够像表格的单元格同样自适应宽度。自适应导航和前面使用“btn-group-justified”制做的自适应按钮组是同样的。只不过在制做自适应导航时更换了另外一个类名“nav-justified”。固然须要和“nav-tabs”或者“nav-pills”配合在一块儿使用
　　在大于 768px 的屏幕上，经过 

.nav-justified

 类能够很容易的让标签页或胶囊式标签呈现出同等宽度。在小屏幕上，导航连接呈现堆叠样式
　　实现原理并不难，列表（<ul>）上设置宽度为“100%”，而后每一个菜单项(<li>)设置了“display:table-cell”，让列表项以模拟表格单元格的形式显示

<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>

 
二级导航 　　不少时候，在Web页面中离不开二级导航的效果。在Bootstrap框架中制做二级导航就更容易了。只须要将li看成父容器，使用类名“dropdown”，同时在li中嵌套另外一个列表ul。也就是添加一个下拉菜单

<ul class="nav nav-pills">
     <li class="active"><a href="##">首页</a></li>
     <li class="dropdown">
        <a href="##" class="dropdown-toggle" data-toggle="dropdown">教程 <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <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>
     <li><a href="##">关于咱们</a></li>
</ul>

 
面包屑导航 　　面包屑(Breadcrumb)通常用于导航，主要做用是告诉用户如今所处页面的位置（当前位置），使用方式就很简单，为ol加入breadcrumb类：
　　面包屑导航(BreadcrumbNavigation)这个概念来自童话故事"汉赛尔和格莱特"，当汉赛尔和格莱特穿过森林时，不当心迷路了，可是他们发如今沿途走过的地方都撒下了面包屑，让这些面包屑来帮助他们找到回家的路。因此，面包屑导航的做用是告诉访问者他们目前在网站中的位置以及如何返回

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">前端</a></li>
  <li class="active">CSS</li>
</ol>

 
转载于猿2048:▷《Bootstrap导航》