1. AB模板網(www.meetilluminatimembers.com)專注企業網站模板制作,包括企業pbootcms網站模板,靜態網頁模板,網站源碼下載,HTML網站模板等等。+ 收藏我們

    網站模板

    網站模板搜索

    注冊

    PbootCMS制作個性分頁條之單頁/總頁數效果

    AB模板網 / 2021-10-25


    第一步: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;
    }
    .pagination a:hover {
      color: #4fc08d;
      border: 1px solid #4fc08d;
    }
    .pagination a.page-num-current {
      color: #fff;
      background: #4fc08d;
      border: 1px solid #4fc08d;
    }
    

    文章搜集與網絡,如有侵權請聯系本站,轉載請說明出處:http://www.meetilluminatimembers.com/pbootcmsjs/9578.html

    有問題可以加入網站技術QQ群一起交流學習

    ☉首先聲明,只要是我們的vip會員全站所有資源均可以免費下載,不做任何限制(了解更多)

    ☉本站的源碼不會像其它下載站一樣植入大量的廣告。

    ☉本站提供的網站源碼,都是做好測試好發布的,均可放心使用。

    ☉本站提供的網站源碼,均帶數據及演示地址?梢栽谌我辉创a詳情頁查看演示地址。

    ☉為了vip利益的最大化,我們還提供了vip贈品(了解更多

    ☉如有其他問題,請加網站客服QQ(9490489)進行交流。

    首頁 pbootcms模板 html模板 會員中心
    欧美一级艳片欧美精品