.
PbootCMS制作个性分页条之单页/总页数效果
2024-04-08
6
第一步：PbootCMS 单页/总页数 分页条效果显示上一页，下一页，首页，尾页，和当前页，以及当前页位于总页数的位置
这种分页效果简洁明了，适合博客站和咨询站等网站使用| 02 | {pboot:if({page:rows}>0)} |
| 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> |
| 14 | <div class="tac text-secondary">本分类下无任何数据！</div> |
|
第二步：CSS样式代码
美化后的分页条效果| 01 | /* ----- 通用PB分页条 ----- */ |
| 04 | justify-content: center; |
| 09 | border: 1px solid #ccc; |
| 18 | border: 1px solid #4fc08d; |
| 20 | .pagination a.page-num-current { |
| 23 | border: 1px solid #4fc08d; |
|
免责声明：以上内容转自其它媒体，相关信息仅为传播更多信息，与本站立场无关。做网站，做小程序，模板小程序不保证该信息（包含但不限于文字、视频、音频、数据及图表）全部或者部分内容的准确性、真实性、完整性、有效性、及时性、原创性等，如有侵权请联系4000-277-886。