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="#">←上一页</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,我们将及时处理。
微信扫码关注
更新实时通知