示例代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>
</head>
<body>
<!-- 分页 -->
<ul class="pager">
<li><a href="http://www.baidu.com">向左</a></li>
<li><a href="http://www.baidu.com">向右</a></li>
</ul>
<!-- 左右排列 -->
<ul class="pager">
<li class="previous"><a href="http://www.baidu.com">向左</a></li>
<li class="next"><a href="http://www.baidu.com">向右</a></li>
</ul>
<ul class="pagination">
<li class="active"><a href="http://www.baidu.com">1</a></li>
<li><a href="http://www.baidu.com">2</a></li>
<li><a href="http://www.baidu.com">3</a></li>
<li><a href="http://www.baidu.com">4</a></li>
<li><a href="http://www.baidu.com">5</a></li>
</ul>
</body>
</html>
显示效果:
非常简单,带pagination类样式修饰的ul即可,active表示选中激活,也可以使用pager类样式修饰,里面子元素可以是a标签也可以是span标签。