bootstrap中怎樣實(shí)現(xiàn)分頁-創(chuàng)新互聯(lián)

bootstrap中怎樣實(shí)現(xiàn)分頁,相信很多沒有經(jīng)驗(yàn)的人對(duì)此束手無策,為此本文總結(jié)了問題出現(xiàn)的原因和解決方法,通過這篇文章希望你能解決這個(gè)問題。

站在用戶的角度思考問題,與客戶深入溝通,找到東平網(wǎng)站設(shè)計(jì)與東平網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:成都做網(wǎng)站、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、域名與空間、網(wǎng)頁空間、企業(yè)郵箱。業(yè)務(wù)覆蓋東平地區(qū)。

新建一個(gè)測(cè)試的pagination.html文件。

<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Bootstrap 分頁測(cè)試</title><link rel="stylesheet" href="../css/bootstrap.min.css">  <script src="../js/jquery-2.0.3.js"></script><script src="../js/bootstrap.min.js"></script></head><body><ul class="pagination"><li><a href="#">&laquo;</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li class="disabled"><a href="#">4</a></li><li class="active"><a href="#">5</a></li><li><a href="#">&raquo;</a></li></ul></body></html>

相關(guān)推薦:《bootstrap入門教程》

打開瀏覽器測(cè)試頁面效果

分頁按鈕正常顯示,但沒有顯示正在哪一頁上,添加class="active"可以高亮顯示頁碼。

如果需要禁用每一頁不可以點(diǎn)擊,可以添加class="disabled"屬性。

點(diǎn)擊某一頁碼的時(shí)候,需要高亮顯示在那一頁上。

$('.pagination li').on('click',function () {      $('.pagination li').removeClass('active');      $(this).addClass('active');  });

給所有的分頁li標(biāo)簽上添加點(diǎn)擊事件,每次先去除所有的active顯示,再給剛剛被點(diǎn)擊的li上添加active,則可以實(shí)現(xiàn)點(diǎn)擊到哪一頁上高亮顯示在那一頁碼上。

如果想調(diào)整頁碼框的尺寸大小,則可以使用bootstrap自帶的屬性

class="pagination pagination-sm" 小class="pagination" 中class="pagination pagination-lg" 大

看完上述內(nèi)容,你們掌握bootstrap中怎樣實(shí)現(xiàn)分頁的方法了嗎?如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!

當(dāng)前名稱:bootstrap中怎樣實(shí)現(xiàn)分頁-創(chuàng)新互聯(lián)
本文URL:http://muchs.cn/article18/dppidp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站設(shè)計(jì)網(wǎng)站建設(shè)、定制開發(fā)網(wǎng)站維護(hù)

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)

搜索引擎優(yōu)化