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链接标签代码和选中效果标签

数字带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}

需要给数字条里的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分页数字条效果 结束 ----- */

显示效果如下图所示:



本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

错误信息 未检测到您服务器环境的sqlite3数据库扩展,请检查php.ini中是否已经开启该扩展! 另外,检测到您服务器支持pdo_sqlite扩展,您也可以修改数据库配置连接驱动为pdo_sqlite试试! 解决方法 解决方法有两种,看具体情况选择: 第一种方法:把数据库配
话不多说,直接上图上代码这里以上传图片为例!其他文件自行修改 首先引入 layui 框架 link rel=stylesheet href={pboot:sitetplpath}/layui/css/layui.css?v=v2.5.4 script type=text/javascript src={pboot:sitetplpath}/layui/layui.all.js?v=v2.5.4/scri
我们在用pbootcms建站时候,经常用到的标签就是时间,我们在这里整理了详细调用方法,希望能够帮到大家。 首页/列表标签: 列表页时间:[list:date] 效果:2021-12-06 09:12:30 列表页时间:[list:date style=Y-m-d] 效果:2021-12-06 列表页时间:[list:dat
我们在用到pbootcms多条件筛选时候,对某一项做筛选,标签项是li开始,这样的话,系统默认的全部选项没有li导致样式异常,如下图: 我们的代码如下: {pboot:selectall field=ext_kj text=全部 active=active} {pboot:select field=ext_kj} {pboot:if([selec
效果如下是,发布时间可以显示: 刚刚; 1小时前; 昨天 几点几分; 前天 几点几分; 年月日 几点几分; 这样的一个个性化日期效果,具体效果可以看本文上方的标题。 1,找到ExtLabelController.php,添加代码 路径:\apps\home\controller\ExtLabelControll
PbootCMS调用面包屑导航,我们可以直接用:{pboot:position} 即可。默认的面包屑标签自带a链接和分隔符,只需要放到对应的div里面设置样式就可以了。 如果我们需要自定义相关面包屑参数时,可以使用下方对应的变量进行调整 separator=* 分隔符,非必填,默认