青草久久影院-青草久久伊人-青草久久久-青草久久精品亚洲综合专区-SM双性精跪趴灌憋尿调教H-SM脚奴调教丨踩踏贱奴

17站長網

17站長網 首頁 CMS pbootcms 查看內容

pbootcms模板制作教程八:自定義分頁樣式

2022-9-21 15:03| 查看: 2470 |來源: 互聯網

要自定義分頁,首先要使用分頁。根據PbootCMS官方文檔,分頁標簽有兩種:系統內置的完整分頁條查看源碼{page:bar}獨立的分頁元素標簽,可自由搭配使用查看源碼{p ...

要自定義分頁,首先要使用分頁。

根據PbootCMS官方文檔,分頁標簽有兩種:

系統內置的完整分頁條

查看源碼

{page:bar}

獨立的分頁元素標簽,可自由搭配使用

查看源碼

{page:current}、{page:count}、{page:rows}...等

第一種:系統內置的完整分頁條

代碼如下:

<div class="paging">{page:bar}</div>


pbootcms模板制作教程七 - 自定義分頁樣式

而且,每個元素都已經擁有了自己的樣式名稱,例如:.page-status、.page-inde...等。

接下來只要寫上對應的CSS進行美化就可以了。

例如:

/* 分頁樣式 */

.paging { margin-top: 32px; font-size: 14px; }

.paging > span { margin: auto 16px; }

.paging .page-numbar { margin: auto 0; }

.paging .page-numbar .page-num,

.paging .page-index,

.paging .page-pre,

.paging .page-next,

.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }

.paging .page-numbar .page-num-current,

.paging .page-numbar .page-num:hover { border-color: #8667F7; color: #8667F7; }

處理后效果:

pbootcms模板制作教程七 - 自定義分頁樣式

第二種:獨立的分頁元素標簽

如果有需求需要對分頁條的內容進行自定義,那么看以本站的分頁代碼為例:

//通過{page:count}來判斷當前列表的分頁數量,如果超過1頁則顯示分頁條

{pboot:if('{page:count}' > 0)}

//分頁容器

<div class="uk-text-center frontier-paging">

    <ul class="uk-clearfix">

        //{page:index}以及{page:pre}指定首頁和上一頁的鏈接地址,并且可以在a標簽中自由設置首頁或者上一頁的文字

        <a class="first" href="{page:index}"><i class="fa fa-angle-double-left"></i></a>

        <a class="uk-visible@s prev" href="{page:pre}"><i class="fa fa-angle-left"></i></a>

        //分頁條

        {page:numbar}

        //同首頁和上一頁,這里是尾頁和下一頁

        <a class="uk-visible@s next" href="{page:next}"><i class="fa fa-angle-right"></i></a>

        <a class="last" href="{page:last}"><i class="fa fa-angle-double-right"></i></a>

    </ul>

</div>

{/pboot:if}

添加樣式美化:

/* 分頁樣式 */

.frontier-paging { margin-top: 32px; }

.frontier-paging ul { display: inline-block; vertical-align: bottom; }

.frontier-paging ul span,

.frontier-paging ul a { display: block; float: left; margin: auto 2px; padding: 4px 12px; background: #FFF; box-shadow: 0 0 8px rgba(0,0,0,0.07); border-radius: 2px; font-size: 14px; color: #999; }

.frontier-paging ul a.page-num-current,

.frontier-paging ul a:hover { background: #775BFF; color: #FFF; }

處理后效果:

pbootcms模板制作教程七 - 自定義分頁樣式

總結:還是以前所說的,PbootCMS的各種標簽已經非常豐富,能不能做出好的東西,就看能不能熟悉標簽,自由組合來達成各種需求。

本文最后更新于 2022-9-21 15:03,某些文章具有時效性,若有錯誤或已失效,請在網站留言或聯系站長:17tui@17tui.com
·END·
站長網微信號:w17tui,關注站長、創業、關注互聯網人 - 互聯網創業者營銷服務中心

免責聲明:本站部分文章和圖片均來自用戶投稿和網絡收集,旨在傳播知識,文章和圖片版權歸原作者及原出處所有,僅供學習與參考,請勿用于商業用途,如果損害了您的權利,請聯系我們及時修正或刪除。謝謝!

17站長網微信二維碼

始終以前瞻性的眼光聚焦站長、創業、互聯網等領域,為您提供最新最全的互聯網資訊,幫助站長轉型升級,為互聯網創業者提供更加優質的創業信息和品牌營銷服務,與站長一起進步!讓互聯網創業者不再孤獨!

掃一掃,關注站長網微信

大家都在看

    熱門排行

      最近更新

        返回頂部
        主站蜘蛛池模板: 国产超碰人人爱被IOS解锁 | 久爱精品亚洲电影午夜 | 久久www99re在线播放 | 日韩精品特黄毛片免费看 | 国产精品第3页 | 国产手机精品一区二区 | 一个人的视频全免费在线观看www | 深爱激情站 | 日本美国群交P片内射捆绑 日本毛片久久国产精品 | 日韩精品一卡二卡三卡四卡2021 | 亚洲色图在线观看视频 | 亚洲国产在线2020最新 | 欧美日韩精品一区二区三区高清视频 | 国产精品亚洲第一区二区三区 | 东京热无码中文字幕av专区 | 女教师公车痴汉在线播放 | 老师洗澡让我吃她胸的视频 | 精品国产中文字幕在线视频 | 亚洲国产高清在线观看视频 | 免费国产成人高清在线观看视频 | 奇虎成人网 | mdapptv麻豆下载 | 亚洲午夜AV久久久精品影院色戒 | 美美哒高清在线播放8 | 国产中的精品AV一区二区 | 在线不卡日本v二区 | 熟女人妻AV五十路六十路 | 免费看b站 | 打扑克床上视频不用下载免费观看 | 秋霞电影网午夜鲁丝片无码 | 亚洲熟女丰满多毛XXXXX | 青青草原在线新免费 | 黄桃AV无码免费一区二区三区 | 国产一区二区波多野结衣 | 青青青伊人 | 婷婷亚洲AV色香蕉蜜桃 | 日本 一二三 不卡 免费 | 亚洲精品九色在线网站 | 久cao在线香蕉 | 使劲别停好大好深好爽动态图 | 国产对白精品刺激一区二区 |