花魁直播高品质美女在线视频互动社区 - 花魁直播官方版

 歡迎來(lái)到素材無(wú)憂網(wǎng),按 + 收藏我們
登錄 注冊(cè) 退出 找回密碼

PbootCMS自定義分頁(yè)樣式的方法

時(shí)間: 2024-02-25 10:04 閱讀: 作者:素材無(wú)憂網(wǎng)

要自定義分頁(yè),首先要使用分頁(yè)。根據(jù)PbootCMS官方文檔,分頁(yè)標(biāo)簽有兩種:系統(tǒng)內(nèi)置的完整分頁(yè)條{page:bar}
獨(dú)立的分頁(yè)元素標(biāo)簽,可自由搭配使用{page:current}、{page:count}、{page:rows}...等
我們先來(lái)看第一種:系統(tǒng)內(nèi)置的完整分頁(yè)條
代碼如下:
???????
{page:bar}

可以看到,一個(gè)完整的分頁(yè)條就出來(lái)了。
而且,每個(gè)元素都已經(jīng)擁有了自己的樣式名稱,例如:.page-status、.page-inde...等。
接下來(lái)只要寫(xiě)上對(duì)應(yīng)的CSS進(jìn)行美化就可以了。
例如:
???????/* 分頁(yè)樣式 */
.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; }
一個(gè)簡(jiǎn)單的分頁(yè)樣式就完成了:

怎么樣?用PbootCMS作者的話來(lái)說(shuō):"是不是簡(jiǎn)單得想哭?"
如果有需求需要對(duì)分頁(yè)條的內(nèi)容進(jìn)行自定義,那么看第二種:獨(dú)立的分頁(yè)元素標(biāo)簽
以本站的分頁(yè)代碼為例:
//通過(guò){page:count}來(lái)判斷當(dāng)前列表的分頁(yè)數(shù)量,如果超過(guò)1頁(yè)則顯示分頁(yè)條
{pboot:if('{page:count}' > 0)}
//分頁(yè)容器
    //{page:index}以及{page:pre}指定首頁(yè)和上一頁(yè)的鏈接地址,并且可以在a標(biāo)簽中自由設(shè)置首頁(yè)或者上一頁(yè)的文字 //分頁(yè)條 {page:numbar} //同首頁(yè)和上一頁(yè),這里是尾頁(yè)和下一頁(yè)

{/pboot:if}
添加樣式美化:
/* 分頁(yè)樣式 */
.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; }
效果圖:(由于演示站沒(méi)有加載字體圖標(biāo),箭頭就用普通的括號(hào)來(lái)表示了)

教程到此為止,剩下的就靠大家自由發(fā)揮了。
總結(jié):還是以前所說(shuō)的,PbootCMS的各種標(biāo)簽已經(jīng)非常豐富,能不能做出好的東西,就看能不能熟悉標(biāo)簽,自由組合來(lái)達(dá)成各種需求。

版權(quán)聲明: 本站資源均來(lái)自互聯(lián)網(wǎng)或會(huì)員發(fā)布,如果侵犯了您的權(quán)益請(qǐng)與我們聯(lián)系,我們將在24小時(shí)內(nèi)刪除!謝謝!

轉(zhuǎn)載請(qǐng)注明: PbootCMS自定義分頁(yè)樣式的方法

標(biāo)簽: PbootCMS  
相關(guān)文章
推薦文章
模板推薦