PbootCMS数字条效果制作
数字条自带a链接标签代码和选中效果标签
数字带class名称为 page-num，当前页自带 page-num-current 样式
<!-- 分页 -->
{ 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样式代码
需要给数字条里的span标签单独设置样式，使分页条更美观好看
数字条样式分页条适合企业网站，行业网站使用
/* ----- 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: 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分页数字条效果 结束 ----- */
显示效果如下图所示
米趣网免责声明
1、本站所有模板素材资源均来自用户分享和网络收集，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服，我们核实后会立即删除。2、米趣网作为第三方中介平台，依据交易合同（商品描述、交易前商定的内容）来保障交易的安全及买卖双方的权益。
3、非平台线上交易的项目，出现任何后果均与米趣网无关；无论卖家以何理由要求线下交易的，请联系管理举报。
注意事项
1、本站所有素材资源均来自用户分享和发布，部分未经测试可用，并不保证百分百无误及完整。2、素材资源仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。
3、米趣网会对双方交易的过程及交易商品的快照进行永久存档，以确保交易的真实、有效、安全。
4、米趣网无法对如“永久包更新”、“永久技术支持”等类似交易之后的商家承诺做担保，请买家自行鉴别。
