7.5.13 分页导航
分页导航在Web页面中也很常用。Bootstrap为分页导航提供了如下样式。
| 方法 |
描述 |
.pagination |
该样式应用于分页导航的<ul>元素。 |
.disabled |
该样式应用于具体的某页对应的链接,表示禁用。 |
.active |
该样式应用于具体的某页对应的链接,表示被激活。 |
为了让屏幕阅读器等辅助设备能准确识别分页导航也是一个导航元素,建议将分页导航放在<nav>元素内。 |
|
程序示例
如下代码示范了分页导航。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 分页导航 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
</head>
<body>
<div class="container-fluid">
<nav>
<ul class="pagination">
<li><a href="#">上一页</a></li>
<li><a href="#">...</a></li>
<li><a href="#">3</a></li>
<li class="active"><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">...</a></li>
<li class="disabled"><a href="#">下一页</a></li>
</ul>
</nav>
</div>
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
|
从以上代码可以看出,分页导航通常就是一个被指定了class="pagination"的无序列表。