當前位置：
首頁 >
BootStrap笔记-分页
發布時間：2025/3/15
24
豆豆
生活随笔
收集整理的這篇文章主要介紹了
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折