PbootCMS实现数字条分页样式效果(1)

更新日期：2024-10-04 22:07:46 来源：网络

在PbootCMS中实现数字条分页效果非常简单，并且可以通过CSS自定义样式。下面详细介绍如何使用PbootCMS的分页组件，并通过CSS修改数字条的外观。

1. 添加分页代码

在需要分页的模板文件中添加以下代码：

<!-- 分页 -->
{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}

2. 修改样式

通过CSS修改数字条分页效果的样式：

/* ----- 分页数字条效果 开始 ----- */
.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;
}
/* ----- 分页数字条效果 结束 ----- */

详细说明

分页代码：
- {pboot:if({page:rows}>0)}：判断是否有分页数据。
- {page:index}：首页链接。
- {page:pre}：上一页链接。
- {page:numbar}：生成数字条分页效果。
- {page:next}：下一页链接。
- {page:last}：尾页链接。
- {else} 和 {/pboot:if}：如果没有数据，则显示“暂无数据”。
CSS样式：
- .pagebar .pagination：设置分页容器的样式。
- .pagination a：设置分页链接的基本样式。
- .pagination span：设置当前页码的样式。
- .pagination a:hover：设置鼠标悬停时的样式。
- .pagination a.page-num-current：设置当前页码的样式。

示例效果

执行以上代码后，页面底部会出现数字条分页效果。通过修改CSS样式，可以自定义分页的外观，包括背景色、字体颜色、边框等。

进一步定制

如果需要进一步定制样式，可以调整CSS中的各种属性，例如：

背景颜色：background-color
字体颜色：color
边框颜色：border-color
边框宽度：border-width
边框样式：border-style
圆角：border-radius

通过这些属性，可以实现更加丰富的分页效果。

当前位置:首页 > CMS