分页导航
在主导航的基础上叠加.nav-page
即显示为分页导航。
基本样式
<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>