导航栏

Bootstrap_导航

 

一、标签形tab导航

　　标签形导航，也称为选项卡导航。

　　标签形导航是通过“.nav-tabs”样式来实现。在制作标签形导航时需要在原导航“.nav”上追加此类名。

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

　　我们想让“Home”项为当前选中项，只需要在其标签上添加类名".active”即可。

<ul class="nav nav-tabs">
    <li class="active"><a href="##">Home</a></li>
    …
</ul>

　　选项卡还带有禁用状态，只需要在标签项上添加".disabled”即可。

<ul class="nav nav-tabs">
    <li class="disabled"><a href="##">Home</a></li>
    …
</ul>

二、胶囊形（pills）导航

　　当前项高亮显示，并带有圆角效果。

　　标签形导航是通过“.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>

三、垂直堆叠的导航

　　制作垂直堆叠导航只需要在“nav-pills”的基础上添加一个“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>

四、自适应导航

自适应导航指的是导航占据容器全部宽度，而且菜单项可以像表格的单元格一样自适应宽度。

只不过在制作自适应导航时更换了另一个类名“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>

五、导航加下拉菜单（二级导航）

　　在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)一般用于导航，主要是起的作用是告诉用户现在所处页面的位置（当前位置）。

　　在Bootstrap框架中面包屑也是一个独立模块组件。使用方式就很简单，为ol加入“breadcrumb”类。

<ol class="breadcrumb">
  <li><a href="#">首页</a></li>
  <li><a href="#">我的书</a></li>
  <li class="active">《图解CSS3》</li>
</ol>