分页导航

基本样式

    <ul class="nav nav-page">
      <li><a href="javascript:;">上一页</a></li>
      <li><a href="javascript:;">1</a></li>
      <li class="active"><a href="javascript:;">2</a></li>
      <li><a href="javascript:;">3</a></li>
      <li><a href="javascript:;">下一页</a></li>
    </ul>
  

分离显示

    <ul class="nav nav-page nav-divider">
      <li><a href="javascript:;">上一页</a></li>
      <li><a href="javascript:;">1</a></li>
      <li class="active"><a href="javascript:;">2</a></li>
      <li><a href="javascript:;">3</a></li>
      <li><a href="javascript:;">下一页</a></li>
    </ul>
  

分组状态

    <ul class="nav nav-page">
      <li><a href="javascript:;">上一页</a></li>
    </ul>
    <ul class="nav nav-page">
      <li><a href="javascript:;">1</a></li>
      <li class="active"><a href="javascript:;">2</a></li>
      <li><a href="javascript:;">3</a></li>
    </ul>
    <ul class="nav nav-page">
      <li><a href="javascript:;">下一页</a></li>
    </ul>
  

菜单分页

    <ul class="nav nav-page nav-menu">
      <li><a href="javascript:;">上一页</a></li>
      <li><a href="javascript:;">1</a></li>
      <li class="active"><a href="javascript:;">2</a></li>
      <li><a href="javascript:;">3</a></li>
      <li><a href="javascript:;">下一页</a></li>
    </ul>
  

分组菜单

分组状态显示时，显示菜单效果，分页菜单需包含在.nav-page-menu内。

    <div class="nav-page-menu">
      <ul class="nav nav-page nav-menu">
        <li><a href="javascript:;">上一页</a></li>
      </ul>
      <ul class="nav nav-page nav-menu">
        <li><a href="javascript:;">1</a></li>
        <li class="active"><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
      </ul>
      <ul class="nav nav-page nav-menu">
        <li><a href="javascript:;">下一页</a></li>
      </ul>
    </div>
  

下拉选项

    <ul class="nav nav-page">
      <li><a href="javascript:;">上一页</a></li>
      <li>
        <select>
          <option value="">1</option>
          <option value="">2</option>
          <option value="">3</option>
        </select>
      </li>
      <li><a href="javascript:;">下一页</a></li>
    </ul>
  

深色背景

    <div class="bg-main padding radius">
      <ul class="nav nav-page nav-inverse">
        <li><a href="javascript:;">上一页</a></li>
        <li><a href="javascript:;">1</a></li>
        <li class="active"><a href="javascript:;">2</a></li>
        <li><a href="javascript:;">3</a></li>
        <li><a href="javascript:;">下一页</a></li>
      </ul>
    </div>