广告：宝塔Linux面板高效运维的服务器管理软件 点击【 https://www.bt.cn/p/uNLv1L 】立即购买
本篇文章给大家介绍一下Bootstrap5中分页导航Pagination组件用法，希望对大家有所帮助！
【相关推荐：《bootstrap教程》】
1、简单例子分页导航一般用于文章列表页、下载列表、图片列表等，由于数据很多，不可能在一页显示，一般分页导航包括上一页、下一页、数字页码等。下面是一个简单的例子：
<nav aria-label="Page navigation"> <ul class="pagination"> <li class="page-item"><a class="page-link" href="#">上一页</a></li> <li class="page-item"><a class="page-link" href="#">1</a></li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> <li class="page-item"><a class="page-link" href="#">下一页</a></li> </ul> </nav>登录后复制2、使用图标
使用图标或符号来代替某些分页链接的文本.
<nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"> <span aria-hidden="true">«</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"> <span aria-hidden="true">»</span></a></li></ul></nav>登录后复制3、禁用和活动状态
分页链接可根据不同情况进行自定义。对于显示为不可单击的链接使用disabled，对于显示为当前页的链接使用active。
虽然.disabled类使用pointer-events: none来尝试禁用a的链接功能，但是CSS属性还没有标准化，并且不考虑键盘导航。因此，您应该始终在禁用的链接上添加tabindex="-1"，并使用自定义JavaScript完全禁用其功能。
<nav aria-label="..."><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" aria-current="page"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>登录后复制4、尺寸大小
喜欢更大或更小的分页？加上pagination-lg 或者pagination-sm，或使用其他尺寸。
<nav aria-label="..."> <ul class="pagination pagination-lg"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="..."> <ul class="pagination"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav> <nav aria-label="..."> <ul class="pagination pagination-sm"> <li class="page-item active" aria-current="page"> <span class="page-link">1</span> </li> <li class="page-item"><a class="page-link" href="#">2</a></li> <li class="page-item"><a class="page-link" href="#">3</a></li> </ul> </nav>登录后复制5、对齐
默认分页导航靠左对齐，老外多习惯靠左，我们中国人喜欢居中，可以使用弹性盒子通用类更改分页组件的对齐方式。将justify-content-center加到ul类中即可。当然你也可以使用justify-content-end靠右对齐，虽然很少见。
<nav aria-label="Page navigation example"><ul class="pagination justify-content-center"><li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav><nav aria-label="Page navigation example"><ul class="pagination justify-content-end"><li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">Previous</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item"><a class="page-link" href="#">2</a></li><li class="page-item"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul></nav>登录后复制
如果这篇文章对你有帮助，记得随手点赞哦！
更多编程相关知识，请访问：编程视频！！
以上就是浅谈Bootstrap5怎么使用分页导航Pagination组件的详细内容，更多请关注9543建站博客其它相关文章！
发表评论