PbootCMS制作个性分页条之单页/总页数效果教程

第一步：PbootCMS 单页/总页数分页条效果

显示上一页，下一页，首页，尾页，和当前页，以及当前页位于总页数的位置

这种分页效果简洁明了，适合博客站和咨询站等网站使用

<!-- 分页 -->
{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><a class="page-item page-num-current" href="javascript:;" title="当前页">{page:current}</a><a class="page-item page-link" href="javascript:;" title="当前页/总页数">{page:current}/{page:count}</a><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}

第二步：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制作个性分页条之单页/总页数效果教程相关推荐

PbootCMS制作个性分页条之单页/总页数效果详细介绍教程
第一步:PbootCMS 单页/总页数分页条效果显示上一页,下一页,首页,尾页,和当前页,以及当前页位于总页数的位置这种分页效果简洁明了,适合博客站和咨询站等网站使用 <!-- 分页 -- ...
纯CSS制作自适应分页条-分享------彭记（019）
纯css制作自适应分页条效果图: html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...
分页总数计算，根据总记录数获取分页总数_ZZGoals
分页总数计算,根据总记录数获取分页总数,本文章提供5种写法,大家感觉哪个好用就拿去用吧. int pageSize = 20; //每页记录数量 int totalCount = 100005; // ...
layui分页组件layPage动态调整总页数
我的小工程的前端使用了layui,这也是当时临时上网查到的一个框架,感觉风格简约,而且据称对后端开发人员很友好. 在使用layui的过程中,我遇到了一些问题,在这里将几个个人感觉比较棘手的问题列举一下 ...
/opt/hbase/conf 中不能启动hbase_Ventoy下载 U盘启动盘制作 Ventoy v1.0.25 单文件便携版附使用教程下载...
Ventoy最新单文件版是新一代多系统启动U盘解决方案.国产开源免费的U盘启动引导制作工具,支持Legacy BIOS和UEFI模式,理论上几乎支持任何ISO镜像文件,支持加载多个不同类型的ISO文 ...
js分页列表找出最后一页的最后一条数据
需求场景: 需求描述:如图所示,想要实现列表中排第一位向上的箭头隐藏, 列表中排最后一位向下的箭头隐藏问题描述: 因为列表存在分页,数据不确定,所以不确定最后一位是否在第几页代码实现: html: ...
HTML CSS 制作响应式价格表单展示id1075-网页前端设计
HTML & CSS 制作响应式价格表单展示id1075-网页前端设计源码下载地址在新演示地址 html <a class="maxbutton-3 maxbutton&q ...
js打印分页、加标题、每页控制条数
js打印分页.加标题.每页控制条数 1.<body加入以下内容> <input class="btn btn-primary btn-sm" type=" ...
（首页上一页下一页尾页 + 下拉框跳转）分页功能
说在前头(本人用的是bootstrap +jQuery 和 struts2 + MVC)不影响分页功能制作一个分页功能: 效果如下: 由上图可知,此功能只适合页数不是特别多的情况下,页数多的时候, ...

PbootCMS制作个性分页条之单页/总页数效果教程

第一步：PbootCMS 单页/总页数分页条效果

第二步：CSS样式代码

PbootCMS制作个性分页条之单页/总页数效果教程相关推荐

最新文章

热门文章

PbootCMS制作个性分页条之单页/总页数效果教程

第一步：PbootCMS 单页/总页数 分页条效果

第二步：CSS样式代码

PbootCMS制作个性分页条之单页/总页数效果教程相关推荐

最新文章

热门文章

第一步：PbootCMS 单页/总页数分页条效果