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文章或者产品设置范围随机增加访客阅读量

pbootcms默认文章访问量是从0开始的。现在想要改成添加文章的时候，给他一个随机访问数。修改文件/apps/admin/controller/conten

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

968

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

在pbootcms网站中，首页通常包含了公司简介等频道内容，为此我们可以使用pboot:content标签来调用对应频道的内容，并将其展示在首页上。要在

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

613

pbootcms详情页常见标签调用

标题：{content:title}浏览量：{content:visits}发布时间：{content:date style=Y-m-d}来源：{content

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

887

Pbootcms站点地图的访问路径

pbootcms站点地图

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

965

pbootcms当前位置面包屑中的首页如何改成英文

pbootcms当前位置面包屑中的首页如何改成英文template文件夹里面，每个文件都打开找找，找到这个代码：{pboot:position}改成：{pboo

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

514

PbootCMS实现数字条分页的代码

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

客服电话

客服邮箱