PbootCMS实现数字条分页的代码

pbootcms教程 2025-02-10 浏览

首页 > 网站知识 > pbootcms教程

文章详情

在使用PbootCMS开发网站时，如果需要实现分页功能，可以使用PbootCMS自带的分页组件。其中数字条是一种非常常见的分页效果，本文将介绍如何使用PbootCMS的数字条分页效果以及如何通过CSS样式修改数字条的外观。

`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`	`{page:numbar}`

`08`	`<a class="page-item page-link"` `href="{page:next}"` `title="下一页">下一页</a>`

`09`	`<a class="page-item page-link hidden-sm"` `href="{page:last}"` `title="尾页">尾页</a>`

10 </div>

11 </div>

12 {else}

`13`	`<div class="tac text-secondary">暂无数据！</div>`

`14`	`{/pboot:if}`

修改数字条分页样式

`01`	`/* ----- AB模板网分页数字条效果开始 ----- */`

`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: 8px 12px;`

`13`	`margin: 0 5px;`

`14`	`border-radius: 3px;`

15 }

`16`	`.pagination span {`

`17`	`color:` `#333;`

`18`	`font-size: 14px;`

`19`	`padding: 8px 2px;`

`20`	`margin: 0 5px;`

`21`	`border-radius: 3px;`

22 }

`23`	`.pagination a:hover {`

`24`	`color:` `#4fc08d;`

`25`	`border: 1px solid` `#4fc08d;`

26 }

`27`	`.pagination a.page-num-current {`

`28`	`color:` `#fff;`

`29`	`background:` `#4fc08d;`

`30`	`border: 1px solid` `#4fc08d;`

31 }

`32`	`/* ----- PB分页数字条效果结束 ----- */`

加入收藏

版权：文章搜集与网络，如有侵权请联系本站, 转载请注明出处：https://www.xuanhaojc.cn/wangzhanzhishi/pbootcmsjiaocheng/197.html

PbootCMS 实现数字条分页的代码分页的代码

宣皓佳创模板网

上一篇：如何在pbootcms网站中调用公司简介等频道内容

下一篇： PbootCMS内容详情页标签调用相关信息

相关推荐

pbootcms模板指定内容标签调用

指定内容标签适用范围：全站任意地方均可使用标签作用：用于调取指定id的内容1、调取指定内容{pboot:content id=*}<a href= &qu

宣皓佳创模板网 pbootcms教程 2025-02-10

944

PbootCMS内容详情页标签调用相关信息

在PbootCMS中常用的内容详情页标签.

宣皓佳创模板网 pbootcms教程 2025-02-10

596

pbootcms模板首页可以打开详情页也可以打开唯独栏目页404是什么原因？

pbootcms模板首页可以打开详情页也可以打开唯独栏目页404是什么原因？今天遇到一个奇怪的问题，首页可以打开，文章详情页也可以打开，但栏目页却是404，

宣皓佳创模板网 pbootcms教程 2025-04-15

670

pbootcms调用搜索页keyword值数量和标签页tag值和数量

search.html搜索页模板获取关键词标签：{$get.keyword} 搜索结果数量的值：{page:rows}tags.html标签页模板获取TAG关键

宣皓佳创模板网 pbootcms教程 2025-02-10

746

pbootcms模板发布文章显示的默认作者如何修改？

宣皓佳创模板网 pbootcms教程 2025-02-10

935

PbootCMS实现数字条分页的代码

创造一个强大的网站从未如此简单！

客服电话

客服邮箱