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="#">←上一页</a></li>
<li class="next"><a href="#">下一页→</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>«上一页</span></li>
<li><a href="#">下一页»</a></li>
</ul>
</body>
</html>
原文链接：https://www.qiquanji.com/post/7856.html
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
微信扫码关注
更新实时通知