目录：
1.bootstrap分页
2 bootstrap翻页
1.bootstrap分页
1.1 总结
1.2 代码示例
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
13
</head>
14
<body style="margin: 60px">
15
16
17
<div class="panel panel-danger">
18
<div class="panel-heading">
19
分页
20
</div>
21
<div class="panel-body">
22
23
<h6>默认分页</h6><hr/>
24
<nav aria-label="Page navigation">
25
<ul class="pagination">
26
<li>
27
<a href="#" aria-label="Previous">
28
<span aria-hidden="true">«</span>
29
</a>
30
</li>
31
32
<li><a href="#">1</a> </li>
33
<li><a href="#">2</a> </li>
34
<li><a href="#">3</a> </li>
35
<li><a href="#">4</a> </li>
36
<li><a href="#">5</a> </li>
37
<li><a href="#">6</a> </li>
38
<li>
39
<a aria-label="Next">
40
<span aria-hidden="true">»</span>
41
</a>
42
</li>
43
</ul>
44
</nav>
45
46
<h6>分页的禁用和**状态</h6><hr/>
47
<nav aria-label="Page navigation">
48
<ul class="pagination">
49
<li>
50
<a href="#" aria-label="Previous">
51
<span aria-hidden="true">«</span>
52
</a>
53
</li>
54
55
<li><a href="#">1</a> </li>
56
<li class="active"><a href="#">2</a> </li>
57
<li><a href="#">3</a> </li>
58
<li><a href="#">4</a> </li>
59
<li><a href="#">5</a> </li>
60
<li><a href="#">6</a> </li>
61
<li>
62
<a aria-label="Next">
63
<span aria-hidden="true">»</span>
64
</a>
65
</li>
66
</ul>
67
</nav>
68
69
70
<h6>分页尺寸</h6><hr/>
71
<nav aria-label="Page navigation">
72
<ul class="pagination pagination-lg">
73
<li>
74
<a href="#" aria-label="Previous">
75
<span aria-hidden="true">«</span>
76
</a>
77
</li>
78
<li><a href="#">1</a> </li>
79
<li class="active"><a href="#">2</a> </li>
80
<li><a href="#">3</a> </li>
81
<li><a href="#">4</a> </li>
82
<li><a href="#">5</a> </li>
83
<li><a href="#">6</a> </li>
84
<li>
85
<a aria-label="Next">
86
<span aria-hidden="true">»</span>
87
</a>
88
</li>
89
</ul>
90
</nav>
91
92
<nav aria-label="Page navigation">
93
<ul class="pagination">
94
<li>
95
<a href="#" aria-label="Previous">
96
<span aria-hidden="true">«</span>
97
</a>
98
</li>
99
100
<li><a href="#">1</a> </li>
101
<li class="active"><a href="#">2</a> </li>
102
<li><a href="#">3</a> </li>
103
<li><a href="#">4</a> </li>
104
<li><a href="#">5</a> </li>
105
<li><a href="#">6</a> </li>
106
<li>
107
<a aria-label="Next">
108
<span aria-hidden="true">»</span>
109
</a>
110
</li>
111
</ul>
112
</nav>
113
114
<nav aria-label="Page navigation">
115
<ul class="pagination pagination-sm">
116
<li class="disabled">
117
<!--注意这里不是<a>标签而是<span>-->
118
<span>
119
<span aria-hidden="true">«</span>
120
</span>
121
</li>
122
123
<li><a href="#">1</a> </li>
124
<li class="active"><a href="#">2</a> </li>
125
<li><a href="#">3</a> </li>
126
<li><a href="#">4</a> </li>
127
<li><a href="#">5</a> </li>
128
<li><a href="#">6</a> </li>
129
<li>
130
<a aria-label="Next">
131
<span aria-hidden="true">»</span>
132
</a>
133
</li>
134
</ul>
135
</nav>
136
</div>
137
</div>
138
139
</body>
140
</html>
1.3 效果截图
2 bootstrap翻页
2.1 总结
2.2 代码示例
1
<!DOCTYPE html>
2
<html>
3
<head lang="en">
4
<meta charset="UTF-8">
5
<title>组件</title>
6
<!--引入bootstrap样式文件-->
7
<link href="css/bootstrap.min.css" rel="stylesheet">
8
<!--引入jq（必须在bootstrap.min.js文件之前）-->
9
<script type="application/javascript" src="js/jquery-3.2.0.js"></script>
10
<!--引入bootstrap js-->
11
<script type="application/javascript" src="js/bootstrap.min.js"></script>
12
</head>
13
<body style="margin: 60px">
14
15
16
<div class="panel panel-success">
17
<div class="panel-heading">
18
翻页
19
</div>
20
<div class="panel-body">
21
22
<h6>默认翻页</h6><hr/>
23
<nav aria-label="pager">
24
<ul class="pager">
25
<li><a href="#">Previous</a></li>
26
<li><a href="#">Next</a></li>
27
</nav>
28
29
<h6>翻页对齐链接</h6><hr/>
30
<nav aria-label="pager">
31
<ul class="pager">
32
<li class="previous">
33
<a href="#"><span aria-hidden="true">←</span>Older</a>
34
35
</li>
36
<li class="Next" >
37
<a href="#">Newer<span aria-hidden="true">→</span></a>
38
</li>
39
40
</ul>
41
</nav>
42
43
<h6>翻页中的禁用</h6><hr/>
44
<nav aria-label="pager">
45
<ul class="pager">
46
<li class="previous disabled"><a href="#"><span aria-hidden="true">←</span> Older</a></li>
47
<li class="next"><a href="#">Newer <span aria-hidden="true">→</span></a></li>
48
</ul>
49
</nav>
50
</div>
51
</div>
52
53
</body>
54
</html>
2.3 示例效果图
