当前位置：
首页 >
BootStrap笔记-分页
发布时间：2025/3/15
27
豆豆
生活随笔
收集整理的这篇文章主要介绍了
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；
总结
以上是生活随笔为你收集整理的BootStrap笔记-分页的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： origin tangent插件_如何用
- 下一篇： uniapp ios时间戳获取不到_2折