BootStrap笔记-分页
程序运行截图：
代码如下：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>CN_TEST1</title><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- bootstrap css核心文件--><link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css"><!-- bootstrap使用到了jquery，需要提前引用--><script src="js/jquery-3.5.1.min.js"></script><!-- 弹窗、提示、下拉菜单--><script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script><!-- bootstrap核心文件--><script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script></head><body><div class="container-fluid"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">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="#">4</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><br/><ul class="pagination"><li class="page-item"><a class="page-link" href="#">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 active"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><br/><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">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 active"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><br/><ul class="pagination pagination-lg"><li class="page-item"><a class="page-link" href="#">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 active"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><br/><ul class="pagination pagination-sm"><li class="page-item"><a class="page-link" href="#">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 active"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">Next</a></li></ul><br/><ul class="breadcrumb"><li class="breadcrumb-item"><a href="#">Photos</a></li><li class="breadcrumb-item"><a href="#">Summer 2017</a></li><li class="breadcrumb-item"><a href="#">Italy</a></li><li class="breadcrumb-item active">Rome</li></ul><!-- 默认-左对齐--><ul class="pagination" style="margin: 20px 0"><li class="breadcrumb-item"><a href="#">Photos</a></li><li class="breadcrumb-item"><a href="#">Summer 2017</a></li><li class="breadcrumb-item"><a href="#">Italy</a></li><li class="breadcrumb-item active">Rome</li></ul><!-- 居中--><ul class="pagination justify-content-center" style="margin: 20px 0"><li class="breadcrumb-item"><a href="#">Photos</a></li><li class="breadcrumb-item"><a href="#">Summer 2017</a></li><li class="breadcrumb-item"><a href="#">Italy</a></li><li class="breadcrumb-item active">Rome</li></ul><!-- 右对齐--><ul class="pagination justify-content-end" style="margin: 20px 0"><li class="breadcrumb-item"><a href="#">Photos</a></li><li class="breadcrumb-item"><a href="#">Summer 2017</a></li><li class="breadcrumb-item"><a href="#">Italy</a></li><li class="breadcrumb-item active">Rome</li></ul><br/></div></body></html>
解释：
①在ul上添加pagination类后，就可以实现分页了；在li上添加page-item；
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://it1995.blog.csdn.net/article/details/122532897
内容来源于网络，如有侵权，请联系作者删除！