bootstrap导航路径和分页器

一、导航路径

 <ul class="breadcrumb"> 
 <li><a href="#">首页</a><span class="divider"></span></li>
 <li class="active">产品列表</li>
 </ul>

ul标签：包含整个导航路径
-breadcrumb类：添加导航路径样式
-li标签：包含单个导航项目名称
----active类：当前标签处于激活状态
----span标签
----------divider类：导航标签之间的分隔符

导航路径

二、分页器

1、数字分页器

<ul  class="pagination">
  <li><a href="#">1</a></li>
  <li class="active"><a href="#">2</a></li>
  <li><a href="#">3</a></li>
  <li><a href="#">4</a></li>
  <li><a href="#">5</a></li>
  </ul>

ul标签：包含整个数字分页器
-pagination类：将无序列表转化为数字分页器
-li标签：包含单个分页器页码
----active类：当前页码处于激活状态

分页器默认左对齐。

数字分页器

2、简单分页器

<ul class="pager">
  <li><a href="#">前一页</a></li>
  <li><a href="#">后一页</a></li>
  </ul>

ul标签：包含整个简单分页器
-pager类：将无序列表转化为简单分页器

简单分页器

<ul class="pager">
  <li class="previous"><a href="#">前一页</a></li>
  <li class="next"><a href="#">后一页</a></li>
  </ul>

li标签
-previous类：
-next类：
使简单分页器两端对齐显示。

两端对齐显示的简单分页器