PbootCMS分页数字条效果制作显示效果如下图所示数字条自带a链接标签代码和选中效果标签数字带class名称为page-num,当前页自带page-num-cur



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}



数字条自带a链接标签代码和选中效果标签

数字带class名称为 page-num,当前页自带 page-num-current 样式


/* ----- 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分页数字条效果 结束 ----- */



点赞(0) 打赏

立即下载

Comment list 共有 0 条评论

暂无评论

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部