第一步：PbootCMS 单页/总页数 分页条效果

    显示上一页，下一页，首页，尾页，和当前页，以及当前页位于总页数的位置

    这种分页效果简洁明了，适合博客站和咨询站等网站使用

01    <!-- 分页 -->    
02    {pboot:if({page:rows}>0)}    
03      <div class="pagebar">    
04        <div class="pagination">    
05          <a class="page-item page-link hidden-sm" href="{page:index}" title="首页">首页</a>    
06          <a class="page-item page-link" href="{page:pre}" title="上一页">上一页</a>    
07          <a class="page-item page-num-current" href="javascript:;" title="当前页">{page:current}</a>    
08          <a class="page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count}</a>    
09          <a class="page-item page-link" href="{page:next}" title="下一页">下一页</a>    
10          <a class="page-item page-link hidden-sm" href="{page:last}" title="尾页">尾页</a>    
11        </div>    
12      </div>     
13    {else}    
14      <div class="tac text-secondary">本分类下无任何数据！</div>    
15    {/pboot:if}

    第二步：CSS样式代码

    美化后的分页条效果

01    /* ----- 通用PB分页条 ----- */    
02    .pagebar .pagination {    
03      display: flex;    
04      justify-content: center;    
05      margin-top: 10px;    
06    }    
07    .pagination a {    
08      background: #fff;    
09      border: 1px solid #ccc;    
10      color: #333;    
11      font-size: 14px;    
12      padding: 6px 8px;    
13      margin: 0 2px;    
14      border-radius: 3px;    
15    }    
16    .pagination a:hover {    
17      color: #4fc08d;    
18      border: 1px solid #4fc08d;    
19    }    
20    .pagination a.page-num-current {    
21      color: #fff;    
22      background: #4fc08d;    
23      border: 1px solid #4fc08d;    
24    }

文章搜集与网络，如有侵权请联系本站，转载请说明出处：https://www.rezhanwang.com/pbootcms/3734.html