7.5.15 翻页导航
对于一些更简单的分页需求,没必要使用分页组件,使用简单的翻页导航组件即可。翻页导航组件只是提供简单的”上一页“、”下一页“按钮方便用户翻页。Bootstrap 为翻页导航组件提供了如下样式。
| 样式 |
描述 |
.pager |
该样式应用于翻页导航的<ul>元素。 |
.disabled |
该样式应用于单个翻页按钮,表示禁用。 |
.previous |
该样式应用于单个翻页按钮,用于将翻页按钮居左显示。 |
.next |
该样式应用于单个翻页按钮,用于将翻页按钮居右显示。 |
为了让屏幕阅读器等辅助设备能准确识别翻页导航也是一个导航元素,建议将翻页导航放在<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
| <!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="pager">
<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>
|
设置翻页按钮在两边显示
默认情况下,翻页导航的两个按钮总是居中显示。如果希望将它们放到两边显示,则可通过.previous和.next两个样式来实现。例如如下代码。
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
| <!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="pager">
<li class="previous"><a href="#">上一页</a></li>
<li class="next 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>
|