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

第一步：PbootCMS 單頁/總頁數分頁條效果

顯示上一頁，下一頁，首頁，尾頁，和當前頁，以及當前頁位于總頁數的位置

這種分頁效果簡潔明了，適合博客站和咨詢站等網站使用

							
														01 
											
														02 
											
														{pboot:if({page:rows}>0)} 
										
														03 
											
												"pagebar"> 
											
														04 
											
												"pagination"> 
											
														05 
											
														 "page-item page-link hidden-sm" href="{page:index}" title="首頁">首頁 
										
														06 
											
														 "page-item page-link" href="{page:pre}" title="上一頁">上一頁 
										
														07 
											
														 "page-item page-num-current" href="javascript:;" title="當前頁">{page:current} 
										
														08 
											
														 "page-item page-link" href="javascript:;" title="當前頁/總頁數">{page:current}/{page:count} 
										
														09 
											
														 "page-item page-link" href="{page:next}" title="下一頁">下一頁 
										
														10 
											
														 "page-item page-link hidden-sm" href="{page:last}" title="尾頁">尾頁 
										
														11 
											
														12 
											
														13 
											
														{else} 
										
														14 
											
												"tac text-secondary">本分類下無任何數據！
											
														15 
											
														{/pboot:if}

第二步：CSS樣式代碼

美化后的分頁條效果

																		
														01 
																						
														/* ----- 通用PB分頁條 ----- */ 
																					
														02 
																						
														.pagebar .pagination { 
																					
														03 
																						
														 display: flex; 
																					
														04 
																						
														 justify-content: center; 
																					
														05 
																						
														 margin-top: 10px; 
																					
														06 
																						
														} 
																					
														07 
																						
														.pagination a { 
																					
														08 
																						
														 background: #fff; 
																					
														09 
																						
														 border: 1px solid #ccc; 
																					
														10 
																						
														 color: #333; 
																					
														11 
																						
														 font-size: 14px; 
																					
														12 
																						
														 padding: 6px 8px; 
																					
														13 
																						
														 margin: 0 2px; 
																					
														14 
																						
														 border-radius: 3px; 
																					
														15 
																						
														} 
																					
														16 
																						
														.pagination a:hover { 
																					
														17 
																						
														 color: #4fc08d; 
																					
														18 
																						
														 border: 1px solid #4fc08d; 
																					
														19 
																						
														} 
																					
														20 
																						
														.pagination a.page-num-current { 
																					
														21 
																						
														 color: #fff; 
																					
														22 
																						
														 background: #4fc08d; 
																					
														23 
																						
														 border: 1px solid #4fc08d; 
																					
														24 
																						
														}

熱門文章

搜索引擎百度到底怎么了？為什么都是廣告內容呢

證件電子信息核驗不合格,電子信息不通過，直接拒絕

公司客服部運營中心對整個公司業務的巨大作用

ICP備案成功后，您需要在網站底部添加備案號和跳轉至工信部的鏈接

小米有品有魚官網

全國互聯網安全管理服務平臺備案需要提供哪些資料

合肥微信公眾號（訂閱號和服務號）代運營托管多少錢

阿里騰訊之后，誰是中國的第三朵云？

阿里云網站備案審核不通過駁回原因及處理辦法詳細介紹

備案負責人會收到工信部發出的短信通知，這個到底是誰號碼呢？

合肥企業做響應式網站建設有什么好處嗎

G3云推廣和258商務衛士/商友宣傳易哪個效果好？

關于建立萬站群哪些事兒可以了解一下

域名驗證未通過，域名為www.ganzhoupu.com(該域名不存在注冊商驗證庫中)

深入挖掘同行，厲害的人是怎么做的？

最新文章

pbootcms一個網站版權自動顯示年份的小優化

修改pbootcms的郵件提醒標題

pbootcms后臺如何隱藏會員中心

pbootcms縮略圖裁剪優化居中裁剪

pbootcms增加可允許上傳文件類型，例如webp、mov等文件格式擴展

pbootcms列表只有一條內容，前端頁面顯示2條的BUG解決方案

pbootcms提示：URL名稱與模型URL名稱沖突，請換一個名稱！

pbootcms自定義前臺404錯誤頁面

pbootcms郵件配置修改發件人信息

pbootcms配置面包屑導航

pbootcms修改模板保存目錄設置二級子目錄

pbootcms怎么修改域名授權提示信息

pbootcms模板tag標簽調用

pbootcms模板內頁如何調用相關文章