PbootCMS分页条css效果数字条效果

更新时间:2个月前 作者:CMS开发网 点赞数:0人 阅读数:99次 0 条评论
摘要:数字条自带a链接标签代码和选中效果标签数字带class名称为 page-num,当前页自带 page-num-current 样式<!--分页-->{pboot:if({page:rows}>0)}<divclass="pagebar"><divclass="pagination">&nb
PbootCMS分页条css效果数字条效果

数字条自带a链接标签代码和选中效果标签

数字带class名称为 page-num,当前页自带 page-num-current 样式

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

需要给数字条里的span标签单独设置样式,使分页条更美观好看

数字条样式分页条适合企业网站,行业网站使用

/* ----- 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: 8px 12px;
  margin: 0 5px;
  border-radius: 3px;
}
.pagination span {
    color: #333;
    font-size: 14px;
    padding: 8px 2px;
    margin: 0 5px;
    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;
}
/* ----- PB分页数字条效果 结束 ----- */

显示效果如下图所示:

PbootCMS分页条css效果数字条效果

怎么样,修改后的是不是更高大上呢。哈哈。就在洒家准备写教程的前几天,在网上突然看到一个很类似的教程帖子,我觉得写得还不够详细,于是进行了完善与补充,现已整理好分享给大家。

不想要···的同学请利用css隐藏

.page-num{display: none;}


THE END

如果你的问题还没有解决,可以加入交流群和群友一起讨论。如果想请站长喝杯咖啡,点击打赏按钮扫码赞赏~

版权声明:本站部分教程是由网络收集,然后整理编辑而成,版权归原作者所有,如果由此而造成的侵权,请与我们联系,审核属实后立即删除,谢谢!请与我们联系,审核属实后立即删除,谢谢!

发表评论

666 感谢 牛逼 卧槽
发表评论
评论列表
暂无评论
关于我们
CMS开发网是一个致力于PbootCMS教程发布,技术交流学习分享开发创作的网站,涵盖PbootCMS应用市场,PB二次开发,PB模版下载,欢迎各位前,欢迎各位前来投稿,您的各位前来投稿使广大PB爱好者,欢迎各位前来投稿,您的分享将会使广大P分享将会使广大PB爱好者来投稿,您的分享将会使广大PB爱好者更好的进步。
微信公众号
微信二维码
联系方式
技术交流QQ群号201010290
电话:400-0707-327
邮箱:kefu@kaifacn.com
坐标:陕西 · 西安
网站地图 陕ICP备2020015383号 陕公网安备61019002001930号

Copyright © 2022 CMS开发网 All Rights Reserved.本站采用创作共用版权 CC 4.0 BY-SA 许可协议