PbootCMS制作个性化分页条的单页/全页效果

2022-12-16 0 827

PbootCMS制作个性化分页条的单页/全页效果

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

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

这种分页效果简洁明了,适用于博客站、咨询站等网站。

<!-- 分页 -->
{pboot:if({page:rows}>0)}
  <div class="pagebar">
    <div class="pagination">
      <a class="page-item page-link hidden-sm" href="{page:index}" rel="external nofollow"  title="首页">首页</a>
      <a class="page-item page-link" href="{page:pre}" rel="external nofollow"  title="上一页">上一页</a>
      <a class="page-item page-num-current" href="javascript:;" rel="external nofollow"  rel="external nofollow"  title="当前页">{page:current}</a>
      <a class="page-item page-link" href="javascript:;" rel="external nofollow"  rel="external nofollow"  title="当前页/总页数">{page:current}/{page:count}</a>
      <a class="page-item page-link" href="{page:next}" rel="external nofollow"  title="下一页">下一页</a>
      <a class="page-item page-link hidden-sm" href="{page:last}" rel="external nofollow"  title="尾页">尾页</a>
    </div>
  </div> 
{else}
  <div class="tac text-secondary">本分类下无任何数据!</div>
{/pboot:if}

第二步:CSS样式代码
美化后的分页条效果
/* ----- 通用PB分页条 ----- */
.pagebar .pagination {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
.pagination a {
  background: #fff;
  border: 1px solid #ccc;
  color: #333;
  font-size: 14px;
  padding: 6px 8px;
  margin: 0 2px;
  border-radius: 3px;
}
.pagination a:hover {
  color: #4fc08d;
  border: 1px solid #4fc08d;
}
.pagination a.page-num-current {
  color: #fff;
  background: #4fc08d;
  border: 1px solid #4fc08d;
}

 

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

建站虎 pbootcms教程 PbootCMS制作个性化分页条的单页/全页效果 https://www.jianzhanhu.com/2563.html

常见问题
  • 1.把网站的程序主机,然后解压压缩包,输入域名打开,会出现授权的页面,直接到pbootcms的官网进行授权(免费商业授权)。 2.登录后台,登录方式:你的域名/admin.php 账号:admin 密码:admin或123456 3.后台-全局配置-配置参数里最下面,填写刚刚申请的授权码 4.站点信息里改成自己当前使用的域名 点击立即提交完成操作。
查看详情

相关文章

发表评论
暂无评论