首页 期权学习期权知识正文

Bootstrap翻页导航的实现

xiaojiucai 期权知识 2020-08-18 345 0

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/post/7856.html

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

微信扫码关注

更新实时通知

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论