关键词搜索

源码搜索 ×
×

BootStrap笔记-分页

发布2022-01-17浏览927次

详情内容

程序运行截图：

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CN_TEST1</title>
  6.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7.  
  8. <!--    bootstrap css核心文件-->
  9.     <link rel="stylesheet" href="bootstrap-4.4.1-dist/css/bootstrap.min.css">
  10. <!--    bootstrap使用到了jquery，需要提前引用-->
  11.     <script src="js/jquery-3.5.1.min.js"></script>
  12. <!--    弹窗、提示、下拉菜单-->
  13.     <script src="bootstrap-4.4.1-dist/js/bootstrap.bundle.js"></script>
  14. <!--    bootstrap核心文件-->
  15.     <script src="bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
  16.  
  17. </head>
  18. <body>
  19.  
  20.     <div class="container-fluid">
  21.  
  22.         <ul class="pagination">
  23.             <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  24.             <li class="page-item"><a class="page-link" href="#">1</a></li>
  25.             <li class="page-item"><a class="page-link" href="#">2</a></li>
  26.             <li class="page-item"><a class="page-link" href="#">3</a></li>
  27.             <li class="page-item"><a class="page-link" href="#">4</a></li>
  28.             <li class="page-item"><a class="page-link" href="#">Next</a></li>
  29.         </ul>
  30.  
  31.         <br/>
  32.  
  33.         <ul class="pagination">
  34.             <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  35.             <li class="page-item"><a class="page-link" href="#">1</a></li>
  36.             <li class="page-item"><a class="page-link" href="#">2</a></li>
  37.             <li class="page-item active"><a class="page-link" href="#">3</a></li>
  38.             <li class="page-item"><a class="page-link" href="#">4</a></li>
  39.             <li class="page-item"><a class="page-link" href="#">Next</a></li>
  40.         </ul>
  41.  
  42.         <br/>
  43.  
  44.         <ul class="pagination">
  45.             <li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
  46.             <li class="page-item"><a class="page-link" href="#">1</a></li>
  47.             <li class="page-item"><a class="page-link" href="#">2</a></li>
  48.             <li class="page-item active"><a class="page-link" href="#">3</a></li>
  49.             <li class="page-item"><a class="page-link" href="#">4</a></li>
  50.             <li class="page-item"><a class="page-link" href="#">Next</a></li>
  51.         </ul>
  52.  
  53.         <br/>
  54.  
  55.         <ul class="pagination pagination-lg">
  56.             <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  57.             <li class="page-item"><a class="page-link" href="#">1</a></li>
  58.             <li class="page-item"><a class="page-link" href="#">2</a></li>
  59.             <li class="page-item active"><a class="page-link" href="#">3</a></li>
  60.             <li class="page-item"><a class="page-link" href="#">4</a></li>
  61.             <li class="page-item"><a class="page-link" href="#">Next</a></li>
  62.         </ul>
  63.  
  64.         <br/>
  65.  
  66.         <ul class="pagination pagination-sm">
  67.             <li class="page-item"><a class="page-link" href="#">Previous</a></li>
  68.             <li class="page-item"><a class="page-link" href="#">1</a></li>
  69.             <li class="page-item"><a class="page-link" href="#">2</a></li>
  70.             <li class="page-item active"><a class="page-link" href="#">3</a></li>
  71.             <li class="page-item"><a class="page-link" href="#">4</a></li>
  72.             <li class="page-item"><a class="page-link" href="#">Next</a></li>
  73.         </ul>
  74.  
  75.         <br/>
  76.  
  77.         <ul class="breadcrumb">
  78.             <li class="breadcrumb-item"><a href="#">Photos</a></li>
  79.             <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  80.             <li class="breadcrumb-item"><a href="#">Italy</a></li>
  81.             <li class="breadcrumb-item active">Rome</li>
  82.         </ul>
  83.  
  84. <!--        默认-左对齐-->
  85.         <ul class="pagination" style="margin: 20px 0">
  86.             <li class="breadcrumb-item"><a href="#">Photos</a></li>
  87.             <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  88.             <li class="breadcrumb-item"><a href="#">Italy</a></li>
  89.             <li class="breadcrumb-item active">Rome</li>
  90.         </ul>
  91.  
  92. <!--        居中-->
  93.         <ul class="pagination justify-content-center" style="margin: 20px 0">
  94.             <li class="breadcrumb-item"><a href="#">Photos</a></li>
  95.             <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  96.             <li class="breadcrumb-item"><a href="#">Italy</a></li>
  97.             <li class="breadcrumb-item active">Rome</li>
  98.         </ul>
  99.  
  100.  
  101. <!--        右对齐-->
  102.         <ul class="pagination justify-content-end" style="margin: 20px 0">
  103.             <li class="breadcrumb-item"><a href="#">Photos</a></li>
  104.             <li class="breadcrumb-item"><a href="#">Summer 2017</a></li>
  105.             <li class="breadcrumb-item"><a href="#">Italy</a></li>
  106.             <li class="breadcrumb-item active">Rome</li>
  107.         </ul>
  108.  
  109.         <br/>
  110.  
  111.     </div>
  112.  
  113. </body>
  114. </html>

 解释：

①在ul上添加pagination类后，就可以实现分页了；在li上添加page-item；

相关技术文章

最新源码

下载排行榜
点击QQ咨询
开通会员
返回顶部
×
微信扫码支付 元
微信扫码支付
确定支付下载
请使用微信描二维码支付
×

提示信息

×

选择支付方式

  • 微信支付
  • 支付宝付款
确定支付下载