当前位置: 首页 > PbootCMS教程 > pbootcms模板列表分页代码及样式

pbootcms模板列表分页代码及样式

源码商城 / 2022-12-15
[] [] []

今天分享下PBOOTCMS分页样式表和代码,欢迎大家学习参考。

pbootcms分页样式1:

 <div class="pages">
     <div class="pagination">
     {pboot:if({page:rows}>0)}
     <a class="page-item" href="{page:index}">首页</a>
     <a class="page-item"href='{page:pre}'>上一页</a>
    {page:numbar}
     <a class="page-item" href='{page:next}'>下一页</a>
     <a class="page-item" href='{page:last}'>末页</a>
    {/pboot:if}
   </div>
 </div>
/*网分页样式*/
.pages{clear:both;padding:20px 0;font-size:14px;text-align:center; overflow:hidden}
.pages .pagination {display:inline-block;margin:0 auto;padding:0}
.pages .pagination .page-item,.pages .pagination .page-num{color:#555; padding: 3px 14px; display:block; border-radius: 2px; border: 1px solid #ddd;float: left;margin: 0 5px;}
.pages .pagination .page-num-current{ background:#12b34a; color:#fff; border:#12b34a 1px solid}
@media only screen and (max-width:768px){
.pages .pagination .page-num {display: none;}
}

 

pbootcms分页样式2:

{pboot:if({page:rows}>0)}
<div class="pages">
<a href="{page:pre}"> << </a>
{page:numbar}
<a href="{page:next}"> >> </a>
<a class="pagecount">{page:current}/{page:count}</a>
</div>
{else}
<div class="text-center my-5 text-secondary">未查询到任何数据!</div>
{/pboot:if}
/*网分页样式*/
.pages{padding: 20px 0;width:100%;text-align: center;clear: both;}
.pages a,.pages span{color: #666;padding: 0 15px;margin: 0 3px;display: inline-block;vertical-align: middle;line-height: 34px;background: #f9f9f9;border: 1px solid #f2f2f2;}
.pages a:hover{display:inline-block;color: #fff;background: #dc0b01;border-color: #dc0b01;box-shadow: 0 0 14px rgba(0, 0, 0, .2);}
.pages span{display:inline-block;color: #666;}
.pages a.page-num-current{display:inline-block;color: #fff;background: #dc0b01;border-color: #dc0b01;box-shadow: 0 0 14px rgba(0, 0, 0, .2);}
.text-secondary{text-align: center; padding:10px 0}

 

本文链接:http://www.365ymw.com/article-1866.html 转载请保留出处,谢谢!

中查找“pbootcms模板列表分页代码及样式”更多相关内容

用户评论

暂时还没有任何用户评论
用户名: 匿名用户
E-mail:
评价等级:
评论内容:
验证码: captcha

浏览历史

免责条款 | 隐私保护 | 联系我们 | 公司简介 | 报价单 | 积分商城 | 留言板
Copyright © 2010-2024 365ymw.com All Rights Reserved. 365源码商城
免责声明:部分图片素材及板块内容来自网络,如有侵犯您的权益,请联系我们,站长会立即处理!
备案号:鄂ICP备2024039974号