导航条

导航条为除导航链接外，还包含品牌、说明文本、按钮、图标、表单、后缀等内容的综合元素，框架用.navbar定义导航条。

基本样式

导航条用.navbar定义，由导航开关.nav.nav-switch、标识.navbar-logo、主体.navbar-body、后缀.navbar-addon组成。其中主体.navbar-body由导航.nav和附加元素.navbar-after构成，其效果为：

默认样式

默认样式一般在手机上使用，主体内容隐藏，点击导航开关后展开显示。

    <div class="navbar">
      <a class="navbar-logo size-big" href="javascript:;"><span class="icon-icon size-large margin-right-small"><i></i></span>品牌</a>
      <div class="navbar-body" id="navbody">
        <ul class="nav nav-divider">
          <li class="active"><a href="javascript:;">栏目</a></li>
          <li>
            <a href="javascript:;">栏目</a>
            <ul class="nav nav-menu nav-divider nav-box bg-white">
              <li><a href="javascript:;">栏目</a></li>
              <li><a href="javascript:;">栏目</a></li>
              <li><a href="javascript:;">栏目</a></li>
            </ul>
          </li>
          <li><a href="javascript:;">栏目</a></li>
          <li><a href="javascript:;">栏目</a></li>
        </ul>
        <div class="navbar-after">
          放文本、按钮、表单等。
        </div>
      </div>
      <div class="navbar-addon"><a class="icon-icon" href="javascript:;"><i></i></a></div>
      <ul class="nav nav-switch size-mini" data-navswitch="#navbody"><li></li><li></li><li></li></ul>
    </div>

外层导航

在实际应用中，导航也经常放在下方，此时需要在导航条外添加.navbar-outer样式，其效果在手机端相同，主要是PC端的差异：

    <div class="navbar-outer">
      <div class="navbar">
        <a class="navbar-logo size-big" href="javascript:;"><span class="icon-icon size-large margin-right-small"><i></i></span>品牌</a>
        <div class="navbar-addon"><a class="icon-icon" href="javascript:;"><i></i></a></div>
        <ul class="nav nav-switch size-mini" data-navswitch="#navbody-outer"><li></li><li></li><li></li></ul>
      </div>
      <div class="bg-main">
        <div class="navbar-body" id="navbody-outer">
          <ul class="nav nav-divider">
            <li class="active"><a href="javascript:;">栏目</a></li>
            <li>
              <a href="javascript:;">栏目</a>
              <ul class="nav nav-menu nav-divider nav-box bg-white">
                <li><a href="javascript:;">栏目</a></li>
                <li><a href="javascript:;">栏目</a></li>
                <li><a href="javascript:;">栏目</a></li>
              </ul>
            </li>
            <li><a href="javascript:;">栏目</a></li>
            <li><a href="javascript:;">栏目</a></li>
          </ul>
          <div class="navbar-after">
            放文本、按钮、表单等。
          </div>
        </div>
      </div>
    </div>

显示导航

在导航条上叠加.navbar-show样式，为导航直接显示效果；使用.navbar-divider-none可让导航分隔线不显示，导航直接显示一般为在PC端使用：

    <div class="navbar navbar-show navbar-divider-none">
      ...
    </div>

外层显示

外层显示时，导航一般会有背景色，此时需要叠加.navbar-show-inverse样式，则导航显示反色。

    <div class="navbar-outer navbar-show navbar-show-inverse">
      ...
    </div>

使用容器

在.navbar及.navbar-body处使用.container样式，可使导航图显示为容器宽度。

    <div class="navbar-outer navbar-show navbar-show-inverse">
      <div class="navbar container">
        ...
      </div>
      <div class="bg-main radius">
        <div class="navbar-body container" id="...">
          ...
        </div>
      </div>
    </div>

导航两端对齐

使用.navbar-show-block样式，可使导航两端对齐显示。

    <div class="navbar-outer navbar-show navbar-show-inverse navbar-show-block">
      <div class="navbar">
        <a class="navbar-logo size-big" href="javascript:;"><span class="icon-icon size-large margin-right-small"><i></i></span>品牌</a>
        <div class="navbar-addon"><a class="icon-icon" href="javascript:;"><i></i></a></div>
        <ul class="nav nav-switch size-mini" data-navswitch="#navbody-inline-outer"><li></li><li></li><li></li></ul>
      </div>
      <div class="bg-main radius">
        <div class="navbar-body" id="navbody-inline-outer">
          <ul class="nav nav-divider">
            <li class="active"><a href="javascript:;">栏目</a></li>
            <li>
              <a href="javascript:;">栏目</a>
              <ul class="nav nav-menu nav-divider nav-box bg-white">
                <li><a href="javascript:;">栏目</a></li>
                <li><a href="javascript:;">栏目</a></li>
                <li><a href="javascript:;">栏目</a></li>
              </ul>
            </li>
            <li><a href="javascript:;">栏目</a></li>
            <li><a href="javascript:;">栏目</a></li>
          </ul>
        </div>
      </div>
    </div>

分隔线

    <div class="navbar navbar-show navbar-divider-none navbar-show-divider">
      ...
    </div>

外层显示

外层显示时，导航一般会有背景色，此时需要叠加.navbar-show-inverse样式，则导航显示反色。

    <div class="navbar-outer navbar-show navbar-show-inverse">
      ...
    </div>

自定义元素

后缀及导航块附加元素可多元化，如文字、图标、按钮、表单等，可根据需要自主决定。

文本+按钮

    <div class="navbar-body">
      <div class="navbar-after">
        您好，欢迎光临！
      </div>
    </div>
    <div class="navbar-addon">
      <a href="javascript:;">注册</a> <a class="button" href="javascript:;">登录</a>
    </div>

表单+按钮

    <div class="navbar-after">
      <form>
        <div class="input-inline">
          <div class="input-inline-auto input-icon">
            <span><i class="icon-search"></i></span>
            <input class="input" size="15" type="search" placeholder="关键词" />
          </div>
          <div class="addon"><input class="button border" type="submit" value="搜索" /></div>
        </div>
      </form>
    </div>

反色背景

当是深色背景时，需要叠加.navbar-inverse导航条反色样式，导航条呈现为反色效果。

    <div class="navbar bg-main radius navbar-inverse">
      ...
    </div>

导航直接显示

    <div class="navbar bg-main radius navbar-inverse navbar-show navbar-divider-none">
      ...
    </div>

外层导航

外层导航，则在.navbar-outer上叠加导航条反色样式.navbar-inverse：

    <div class="navbar-outer bg-main radius navbar-inverse">
      ...
    </div>

导航直接显示

    <div class="navbar-outer bg-deep navbar-show navbar-inverse">
      ...
    </div>

仅导航反色

仅导航使用深色背景时，叠加.navbar-show-inverse样式，此时仅导航显示反色：

    <div class="navbar-outer navbar-show navbar-show-inverse">
      ...
    </div>