上QQ阅读APP看书，第一时间看更新
5.6 Bootstrap分页
本节介绍Bootstrap框架的分页组件，在Bootstrap框架中使用．pagination类来实现分页，大体上分为标准分页方式和翻页分页方式两种。
5.6.1 标准分页方式
Bootstrap框架中标准分页方式比较适合App应用搜索结果的展示，分页中点击区域比较大，方便用户操作，且易于扩展。下面看一段代码示例。
【代码5-20 】是一个标准分页方式的设计（详见源代码ch05目录中ch05.standardPagination.html文件）：
01 <div class="bs-docs-example">
02 <div class="pagination">
03 <ul>
04 <li><a href="#">« </a></li>
05 <li><a href="#">1</a></li>
06 <li><a href="#">2</a></li>
07 <li><a href="#">3</a></li>
08 <li><a href="#">4</a></li>
09 <li><a href="#">5</a></li>
10 <li><a href="#">6</a></li>
11 <li><a href="#">7</a></li>
12 <li><a href="#">8</a></li>
13 <li><a href="#">9</a></li>
14 <li><a href="#">» </a></li>
15 </ul>
16 </div>
17 </div>
【代码5-20】中第02～16行代码通过．pagination类定义了一个标准分页组件，页面效果如图5.21所示。
图5.21 默认分页样式
5.6.2 翻页分页方式
Bootstrap框架中还包括一种翻页分页方式，该方式用更少的标签和样式来创建简单的“前一页”和“后一页”代码。下面看一段代码示例。
【代码5-21】是一个翻页分页方式的设计（详见源代码ch05目录中ch05.pagePagination.html文件）：
01 <div class="bs-docs-example">
02 <ul class="pager">
03 <li><a href="#">前一页</a></li>
04 <li><a href="#">后一页</a></li>
05 </ul>
06 </div>
【代码5-21】中第02～05行代码通过．pager类定义了一个翻页分页组件，页面效果如图5.22所示。
图5.22 翻页分页样式