PbootCMS制作個(gè)性分頁(yè)條之單頁(yè)/總頁(yè)數(shù)效果

第一步:PbootCMS 單頁(yè)/總頁(yè)數(shù) 分頁(yè)條效果
顯示上一頁(yè),下一頁(yè),首頁(yè),尾頁(yè),和當(dāng)前頁(yè),以及當(dāng)前頁(yè)位于總頁(yè)數(shù)的位置
這種分頁(yè)效果簡(jiǎn)潔明了,適合博客站和咨詢站等網(wǎng)站使用
01<!-- 分頁(yè) -->
02{pboot:if({page:rows}>0)}
03<div class="pagebar">
04<div class="pagination">
05<a class="page-item page-link hidden-sm" href="{page:index}" title="首頁(yè)">首頁(yè)</a>
06<a class="page-item page-link" href="{page:
PRe}" title="上一頁(yè)">上一頁(yè)</a>
07<a class="page-item page-num-current" href="
Javascript:;" title="當(dāng)前頁(yè)">{page:current}</a>
08<a class="page-item page-link" href="javascript:;" title="當(dāng)前頁(yè)/總頁(yè)數(shù)">{page:current}/{page:count}</a>
09<a class="page-item page-link" href="{page:next}" title="下一頁(yè)">下一頁(yè)</a>
10<a class="page-item page-link hidden-sm" href="{page:last}" title="尾頁(yè)">尾頁(yè)</a>
11</div>
12</div>
13{else}
14<div class="tac text-secondary">本分類下無(wú)任何數(shù)據(jù)!</div>
15{/pboot:if}
第二步:CSS樣式代碼
美化后的分頁(yè)條效果
01/* ----- 通用PB分頁(yè)條 ----- */
02.pagebar .pagination {
04justify-content: center;
05margin-top: 10px;
06}
07.pagination a {
08background: #fff;
09border: 1px solid #ccc;
10color: #333;
11font-size: 14px;
12padding: 6px 8px;
13margin: 0 2px;
14border-radius: 3px;
15}
16.pagination a:hover {
17color: #4fc08d;
18border: 1px solid #4fc08d;
19}
20.pagination a.page-num-current {
21color: #fff;
22background: #4fc08d;
23border: 1px solid #4fc08d;
24}
本文鏈接:http://m.373753.com/xinwendongtai/1982.html
版權(quán)聲明:站內(nèi)所有文章皆來(lái)自網(wǎng)絡(luò)轉(zhuǎn)載,只供模板演示使用,并無(wú)任何其它意義!