1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

Bootstrap翻页导航的实现

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

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

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: