PbootCMS实现数字条分页样式效果(1)

wdzsjl 2周前 (01-01) 阅读数 47 #帝国EmpireCMS

添加分页代码

在需要分页的模板文件中添加以下代码：

<!-- 分页 --> {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>             {page:numbar}             <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样式：

/* ----- 分页数字条效果 开始 ----- */ .pagebar .pagination {     display: flex;     justify-content: center;     margin-top: 10px; } .pagination a {     background: #fff;     border: 1px solid #ccc;     color: #333;     font-size: 14px;     padding: 8px 12px;     margin: 0 5px;     border-radius: 3px; } .pagination span {     color: #333;     font-size: 14px;     padding: 8px 2px;     margin: 0 5px;     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; } /* ----- PB分页数字条效果 结束 ----- */

阅读全文

上一篇：PbootCMS安装后，默认的后台用户名和密码是多少，怎么登陆？下一篇：PbootCMS实现登录后才能留言的功能