+ 收藏我們

網(wǎng)站模板

網(wǎng)站模板搜索

注冊
網(wǎng)站模板 > cms教程 > pbootcms教程 >

PbootCMS實(shí)現數字條分頁(yè)樣式效果

AB模板網(wǎng) / 2024-03-19
先看效果圖:

PbootCMS實(shí)現數字條分頁(yè)樣式效果

在使用PbootCMS開(kāi)發(fā)網(wǎng)站時(shí),如果需要實(shí)現分頁(yè)功能,可以使用PbootCMS自帶的分頁(yè)組件。其中數字條是一種非常常見(jiàn)的分頁(yè)效果,本文將介紹如何使用PbootCMS的數字條分頁(yè)效果以及如何通過(guò)CSS樣式修改數字條的外觀(guān)。

首先,在需要分頁(yè)的模板文件中添加以下代碼:

<!-- 分頁(yè) -->
{pboot:if({page:rows}>0)}
  <div class="pagebar">
    <div class="pagination">
      <a class="page-item page-link hidden-sm" href="{page:index}" title="首頁(yè)">首頁(yè)</a>
      <a class="page-item page-link" href="{page:pre}" title="上一頁(yè)">上一頁(yè)</a>
      {page:numbar}
      <a class="page-item page-link" href="{page:next}" title="下一頁(yè)">下一頁(yè)</a>
      <a class="page-item page-link hidden-sm" href="{page:last}" title="尾頁(yè)">尾頁(yè)</a>
    </div>
  </div> 
{else}
  <div class="tac text-secondary">暫無(wú)數據!</div>
{/pboot:if}

在以上代碼中,{page:numbar}標簽表示生成數字條分頁(yè)效果。執行以上代碼后,就可以在網(wǎng)頁(yè)底部看到數字條分頁(yè)效果了。
 
數字條分頁(yè)效果默認帶有a鏈接標簽和選中效果標簽,數字標記的class名稱(chēng)為 page-num,當前頁(yè)碼標記的class名稱(chēng)為 page-num-current。

修改數字條分頁(yè)樣式

/* ----- AB模板網(wǎng)分頁(yè)數字條效果 開(kāi)始 ----- */
.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分頁(yè)數字條效果 結束 ----- */

通過(guò)修改上述CSS樣式中的屬性,例如背景顏色、字體大小、邊框顏色等屬性,就可以輕松地定制數字條分頁(yè)效果的樣式。

文章搜集與網(wǎng)絡(luò ),如有侵權請聯(lián)系本站,轉載請說(shuō)明出處:http://www.warewashingadvisors.com/pbootcmsjs/10929.html
首頁(yè) pbootcms模板 html模板 會(huì )員中心