pbootcms制作个性分页条之单页/总页数效果
1、效果
第一步:PbootCMS 单页/总页数 分页条效果显示上一页,下一页,首页,尾页,和当前页,以及当前页位于总页数的位置这种分页效果简洁明了,适合博客站和咨询站等网站使用。
{pboot:if({page:rows}>0)} "pagebar"> "pagination"> "page-item page-link hidden-sm" href="{page:index}" title="首页">首页 "page-item page-link" href="{page:pre}" title="上一页">上一页 "page-item page-num-current" href="javascript:;" title="当前页">{page:current} "page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count} "page-item page-link" href="{page:next}" title="下一页">下一页 "page-item page-link hidden-sm" href="{page:last}" title="尾页">尾页 {else} "tac text-secondary">本分类下无任何数据! {/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; }
本文来源:转载
版权声明:本站內容部分来源于网络,仅供个人学习交流。如有侵权内容请留言告知,本站将会立即处理!
文章标题:pbootcms制作个性分页条之单页/总页数效果
本文链接:https://www.zluckin.com/32.html
原文链接:
版权声明:本站內容部分来源于网络,仅供个人学习交流。如有侵权内容请留言告知,本站将会立即处理!
文章标题:pbootcms制作个性分页条之单页/总页数效果
本文链接:https://www.zluckin.com/32.html
原文链接:
0 条评论
936
关于我
昵称:ZLUCKIN
区域:中国 · 河南
简言:好好生活,慢慢相遇。
热门文章
LINUX下安装宝塔...2398 阅读
Linux下安装宝塔面板,创建本地站点...
关于PBCMS站点4...1855 阅读
1、站点前后台都报404错误 一般主要...
PbootCMS 常...1546 阅读
1. 导航高亮{pboot:if(...
LEADSHOP关于...1533 阅读
LEADSHOP运行环境LEADSHO...
Docker 教程1438 阅读
Docker 是一个开源的应用容器引擎...