Bootstrap翻页导航的实现

时间：6年前阅读：4942

Bootstrap框架除了提供带页码的分页导航之外还提供了翻页导航。这种分页导航常常在一些简单的网站上看到，比如说个人博客，杂志网站等。这种分页导航是看不到具体的页码，只会提供一个“上一页”和“下一页”的按钮

默认用法

　　在实际使用中，翻页分页导航和带页码的分页导航类似，为ul标签加入pager类

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="/js/jquery-1.11.3.min.js"></script>
		<script src="/bootstrap/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
	</head>
	<body>
		<ul class="pager">
   <li><a href="#">«上一页</a></li>
   <li><a href="#">下一页»</a></li>
</ul>
	</body>
</html>

对齐设置

　　默认情况之下，翻页分页导航是居中显示，但有的时候我们需要一个居左，一个居右。Bootstrap框架提供了两个样式：

　　 previous：让“上一步”按钮居左

　　 next：让“下一步”按钮居右

　　具体使用的时候，只需要在li标签上添加对应类名即可

　　实现原理很简单，就是一个进行了左浮动，一个进行了右浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.pager .next > a,
			.pager .next > span {
			float: right;
			}
			.pager .previous > a,
			.pager .previous > span {
			float: left;
			}
		</style>
		<script src="/jquery-1.11.3.min.js"></script>
		<script src="/bootstrap/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
	</head>
	<body>
	<ul class="pager">
   <li class="previous"><a href="#">&larr;上一页</a></li>
   <li class="next"><a href="#">下一页&rarr;</a></li>
	</ul>
	</body>
</html>

状态设置

　　和带页码分页导航一样，如果在li标签上添加了disabled类名的时候，分页按钮处于禁用状态，但同样不能禁止其点击功能。可以通过js来处理，或将a标签换成span标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		.pager .disabled > a,
.pager .disabled >a:hover,
.pager .disabled >a:focus,
.pager .disabled > span {
  color: #999;
  cursor: not-allowed;
  background-color: #fff;
}
		</style>
		<script src="/js/jquery-1.11.3.min.js"></script>
		<script src="/bootstrap/bootstrap.min.js"></script>
		<link rel="stylesheet" href="/bootstrap/bootstrap.min.css">
	</head>
	<body>
	<ul class="pager">
  <li class="disabled"><span>&laquo;上一页</span></li>
  <li><a href="#">下一页&raquo;</a></li>
</ul>
	</body>
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

Bootstrap翻页导航的实现

网友评论