pb分页条(1)

PbootCMS制作个性分页条之单页/总页数效果(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}

第二步:CSS 样式美化

/* ----- 通用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: 6px 8px;/* 内边距 */
    margin: 0 2px;/* 外边距 */
    border-radius: 3px;    /* 圆角 */
    text-decoration: none;/* 去掉下划线 */
}
.pagination a:hover {
    color: #4fc08d;/* 鼠标悬停文字颜色 */
    border: 1px solid #4fc08d;/* 鼠标悬停边框颜色 */
}
.pagination a.page-num-current {
    color: #fff;/* 当前页文字颜色 */
    background: #4fc08d;/* 当前页背景颜色 */
    border: 1px solid #4fc08d;/* 当前页边框颜色 */
    pointer-events: none;/* 禁用点击 */
}

英文样式

{pboot:if({page:rows}>0)}
  <div class="pagebar">
    <div class="pagination">
      <a class="page-item page-link hidden-sm" href="{page:index}" title="index">index</a>
      <a class="page-item page-link" href="{page:pre}" title="pre">pre</a>
      {page:numbar}
      <a class="page-item page-link" href="{page:next}" title="next">next</a>
      <a class="page-item page-link hidden-sm" href="{page:last}" title="last">last</a>
    </div>
  </div>
{else}
  <div class="tac text-secondary">No data found!</div>
{/pboot:if}
<style>
  .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: #2989d8;
  border: 1px solid #2989d8;
}

.pagination a.page-num-current {
  color: #fff;
  background: #2989d8;
  border: 1px solid #2989d8;
  }
</style>