分页 - 前端学习教程_ 前端_前端开发

在前端页面开发的过程中，经常会使用到分页器的功能，分页器的功能是帮助用户快速的跳转到指定页码的页面，当用户想要打开指定页面时，不需要用户多次操作，实现了一步到位的效果，提高了用户的使用体验。

下面通过例6-1演示Bootstrap中的分页器的实现方式。

【例6-1】

创建C:\Bootstrap\chapter06\demo04.html文件，具体代码如下。

1  <!DOCTYPE html>
2  <html>
3  <head>
4   <meta charset="UTF-8">
5   <meta name="viewport" content="width=device-width, initial-scale=1.0">
6   <title>Document</title>
7   <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
8  </head>
9  <body>
10  <nav aria-label="Page navigation example">
11   <ul class="pagination">
12    <li class="page-item">
13     <a class="page-link" href="#" aria-label="Previous">
14      <span aria-hidden="true">&laquo;</span>
15     </a>
16    </li>
17    <li class="page-item"><a class="page-link" href="#">1</a></li>
18    <li class="page-item"><a class="page-link" href="#">2</a></li>
19    <li class="page-item"><a class="page-link" href="#">3</a></li>
20    <li class="page-item"><a class="page-link" href="#">4</a></li>
21    <li class="page-item"><a class="page-link" href="#">5</a></li>
22    <li class="page-item"><a class="page-link" href="#">6</a></li>
23    <li class="page-item"><a class="page-link" href="#">7</a></li>
24    <li class="page-item">
25     <a class="page-link" href="#" aria-label="Next">
26      <span aria-hidden="true">&raquo;</span>
27     </a>
28    </li>
29   </ul>
30  </nav>
31 </body>
32 </html>

上述代码中，第7行代码引入bootstrap.min.css文件；第10行代码设置nav元素的aria-label属性的值为“Page navigation example”，表示分页器模块；第11行代码在nav中，定义类名为.pagination的ul元素，表示分页器模块的最外层盒子；第12~28行代码在.pagination的内部定义多个类名为.page-item的li元素，表示分页器列表，并且在每一项内容中定义类名为.page-link的a标签，表示页码标签，在a标签中添加数字内容，表示页码。其中，在第一个a标签中定义aria-label属性的值为Previous，表示上一页，并且添加“<<”符号，即&laquo；在最后一个a标签中定义aria-label属性的值为Next，表示下一页，并且添加“>>”符号，即&raquo。

在浏览器中打开demo04.html文件，运行结果如图1所示。

图1 分页器