爱码网

一、标签导航

标签导航，也称为标签导航。

标签形导航是使用“.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”项成为当前选中的项，只需在其标签上添加类名“。”可以使用。

<ul class="nav nav-tabs">

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

标签也被禁用，只需添加“。”到标签项。

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

二、药丸导航

当前项目以圆角突出显示。

标签形导航是使用“.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-”类名即可。

<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-”。当然需要配合“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>

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

要在框架中进行二级导航，只需将li视为父容器，使用类名“”，同时在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>

六、面包屑

面包屑（ ）一般用于导航，其主要作用是告诉用户页面的当前位置（当前位置）。

面包屑也是框架中的一个独立模块组件。用法很简单，在ol里面加””类。

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