主导航

框架用.nav定义主导航。

基本样式

主导航基于ul列表标签，含.active激活和.disabled禁用状态。

    <ul class="nav">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

显示方式

默认的导航居左显示，也可以设置为居中、右侧、两端对齐等显示方式。

居中显示

主导航叠加.nav-center样式，导航链接居中显示。

    <ul class="nav nav-center">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

右侧显示

主导航叠加.nav-right样式，导航链接右侧显示。

    <ul class="nav nav-right">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

两端对齐

主导航叠加.nav-block样式，导航两端对齐显示。

    <ul class="nav nav-block">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

内联显示

主导航叠加.nav-inline样式，导航内联显示。

    <ul class="nav nav-inline">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

分隔线

主导航叠加.nav-divider，导航链接用长竖线分隔。

    <ul class="nav nav-block nav-divider">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

短分隔线

主导航叠加.nav-divider-line，导航链接用短竖线分隔。

    <ul class="nav nav-block nav-divider-line">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

盒子

主导航叠加.nav-box，可实现外围增加一个盒子包围。

    <ul class="nav nav-box">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

盒子分隔线

在盒子的基础上叠加.nav-divider，链接之间用竖线分开。

    <ul class="nav nav-divider nav-block nav-box">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

导航尺寸

小号导航

主导航叠加.nav-small样式，导航显示为小一号。

    <ul class="nav nav-small">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

大号导航

主导航叠加.nav-big样式，导航显示为大一号。

    <ul class="nav nav-big">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

背景颜色

在主导航上，可叠加.bg-颜色样式，改变导航的背景色。

淡色背景

淡色背景下，直接叠加颜色样式，也可叠加圆角样式radius-尺寸。

    <ul class="nav bg-light radius">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

深色背景

在使用深色背景时，文字颜色不明显，需要叠加.nav-inverse导航反色样式。

    <ul class="nav bg-sub nav-inverse radius">
      <li class="active"><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

子菜单

子菜单为主导航基础上，结合下拉菜单元件，显示为子菜单效果。

    <ul class="nav">
      <li class="drop active">
        <a href="javascript:;">栏目</a>
        <div class="dropdown">
          <ul class="nav nav-menu nav-box nav-divider bg-white">
            <li class="active"><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li class="disabled"><a href="javascript:;">子栏目</a></li>
          </ul>
        </div>
      </li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>

综合应用

上述主导航效果显示方式、分隔线、尺寸、背景色、子菜单等的叠加应用。

    <ul class="nav nav-block nav-divider nav-big bg-main nav-inverse radius">
      <li class="drop active">
        <a href="javascript:;">栏目</a>
        <div class="dropdown">
          <ul class="nav nav-menu nav-box nav-divider bg-white">
            <li class="active"><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li><a href="javascript:;">子栏目</a></li>
            <li class="disabled"><a href="javascript:;">子栏目</a></li>
          </ul>
        </div>
      </li>
      <li><a href="javascript:;">栏目</a></li>
      <li><a href="javascript:;">栏目</a></li>
      <li class="disabled"><a href="javascript:;">栏目</a></li>
    </ul>