bootstrap實(shí)現(xiàn)分頁技術(shù)的方法-創(chuàng)新互聯(lián)

小編給大家分享一下bootstrap實(shí)現(xiàn)分頁技術(shù)的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、遼中網(wǎng)絡(luò)推廣、小程序定制開發(fā)、遼中網(wǎng)絡(luò)營銷、遼中企業(yè)策劃、遼中品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供遼中建站搭建服務(wù)，24小時(shí)服務(wù)熱線：18982081108，官方網(wǎng)址：muchs.cn

bootstrap分頁實(shí)現(xiàn)

任何一個(gè)網(wǎng)頁里面, 我們都可以看到分頁, 不管是移動(dòng)端, 還是pc端, 不管是下拉到下一頁, 還是按鈕下一頁, 都需要分頁支撐你的網(wǎng)站. 這樣首先, 可以提高你的網(wǎng)站的訪問效率. 另外頁面展現(xiàn)也更加好看, 要不然, 上百萬的上千萬的數(shù)據(jù). 顯示估計(jì)一兩個(gè)小時(shí)也顯示不出來效果. 怎么使用bootstrap實(shí)現(xiàn)分頁呢? Let's go!!!

工具/原料

需要用到bootstrap框架v3以上. 現(xiàn)在最新3.2 使用2個(gè)樣式即可實(shí)現(xiàn)1.pagination 2.pager

bootstrap的分頁

一、在bootstrap中分頁有兩種, 一種是正常的分頁, 第二種是翻頁. 就是有上一頁和下一頁的顯示效果.

1.分頁: 帶有頁面的效果, 這里你里面可以隨你的網(wǎng)站怎么定義都可以, 比方說. 里面不是文字, 而是一些圖標(biāo),一樣可以. 只不過數(shù)字能夠更好的看效果. 使用樣式: .pagination

2.帶有上一項(xiàng)和下一項(xiàng)的翻頁效果, 最簡單的方式. 樣式.pager

兩種方法的實(shí)現(xiàn), 都是需要使用ul標(biāo)簽, 鏈接是使用a.  還有一些狀態(tài), 比方說, 我選中了某一項(xiàng).  其中的某一項(xiàng)靜止使用.

二、一個(gè)簡單的分頁, 默認(rèn)的效果.

在ul上加上樣式.pagination, 然后下面就是一個(gè)一個(gè)的li. 然后實(shí)現(xiàn)效果, 就如圖所示,  這就是一個(gè)最簡單的默認(rèn)的樣式. 可以看出來, 實(shí)現(xiàn)起來很簡單. 但是效果卻很棒.

三、如何在顯示的頁面上高亮顯示, 標(biāo)識顯示的是該頁.

這里使用樣式.active. 來標(biāo)識選擇的頁面. 查看效果和代碼如圖.

這里需要注意的是: 在該代碼里增加了如下的代碼: <span class="sr-only">(current)</span> 是因?yàn)? 該代碼表示, 當(dāng)前頁面不為能點(diǎn)擊. 因?yàn)楫?dāng)前頁面, 數(shù)據(jù)已經(jīng)刷新出來了. 如果你想要點(diǎn)擊, 就把這句話去掉.

四、如何在到第一頁或者尾頁的時(shí)候, 讓上一頁和下一頁禁止用戶點(diǎn)擊.

這里可以使用.disabled 樣式來實(shí)現(xiàn).  如圖所示, 讓上一頁不能點(diǎn)擊. 在不想讓單擊的樣式上加上.disabled 即可.

五、在分頁里面, 定義了除了默認(rèn)的樣式大小之外, 還定義了另外兩種樣式.

1 .pagination-lg 比默認(rèn)樣式大的樣式

2 .pagination-sm 比默認(rèn)樣式小的樣式

實(shí)現(xiàn)代碼對比效果.  左側(cè)是放大的樣式, 右側(cè)是縮小的樣式.

六、這里給出的樣式都是最簡單的樣式, 如果需要其他樣式的, 比方說, 不喜歡這個(gè)顏色. 等等, 那就需要自己自定義樣式來實(shí)現(xiàn).

END

bootstrap的翻頁

1、用簡單的標(biāo)記和樣式，就能做個(gè)上一頁和下一頁的簡單翻頁。比方說博客和文章類的網(wǎng)站, 就很多使用了這樣的樣式. 樣式使用.pager, 效果和代碼如圖, 這里更加簡單的顯示了上一頁和下一頁. 樣式是居中在頁面上. 那如何把上一項(xiàng)和下一項(xiàng)放在頁面的兩端呢. 繼續(xù)往下看.

2、如何讓按鈕在兩端顯示呢? 這里使用對齊鏈接. 樣式分別為: .previous 和 .next

實(shí)現(xiàn)代碼如圖. 需要注意的是, 這個(gè)樣式里面默認(rèn)不支持, 使用分頁樣式, 如果想兩種同時(shí)使用, 需要自己另外寫代碼.

3、在翻頁這個(gè)樣式里面, 也可以讓上一篇或者下一篇禁用, 禁用方法和分頁一樣, 使用樣式.disabled

4、這兩種樣式, 基本上都能夠支持大多少我們遇到的分頁問題. 還有一種就是移動(dòng)端的, 這個(gè)的話, 就可以使用一個(gè)鏈接按鈕, 然后異步獲得數(shù)據(jù)就可以了.

以上是bootstrap實(shí)現(xiàn)分頁技術(shù)的方法的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道！

網(wǎng)頁名稱：bootstrap實(shí)現(xiàn)分頁技術(shù)的方法-創(chuàng)新互聯(lián)
本文路徑：http://muchs.cn/article0/dejcio.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站策劃、定制網(wǎng)站、標(biāo)簽優(yōu)化、外貿(mào)網(wǎng)站建設(shè)

廣告

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