溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了bootstrap中怎么實現(xiàn)分頁，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。
怎么使用bootstrap實現(xiàn)分頁呢?
在bootstrap中分頁有兩種, 一種是正常的分頁, 第二種是翻頁. 就是有上一頁和下一頁的顯示效果.
分頁: 帶有頁面的效果, 這里你里面可以隨你的網(wǎng)站怎么定義都可以, 比方說. 里面不是文字, 而是一些圖標(biāo),一樣可以. 只不過數(shù)字能夠更好的看效果. 使用樣式: .pagination
分頁（Pagination），是一種無序列表，Bootstrap 像處理其他界面元素一樣處理分頁。
帶有上一項和下一項的翻頁效果, 最簡單的方式. 樣式.pager
（Pager）翻頁，如果您想要創(chuàng)建一個簡單的分頁鏈接為用戶提供導(dǎo)航，可通過翻頁來實現(xiàn)。與分頁鏈接一樣，翻頁也是無序列表。
兩種方法的實現(xiàn), 都是需要使用ul標(biāo)簽, 鏈接是使用a. 還有一些狀態(tài), 比方說, 我選中了某一項. 其中的某一項靜止使用.
分頁實例
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Bootstrap 實例 - 默認(rèn)的分頁</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><ul class="pagination"><li><a href="#">«</a></li><li><a href="#">1</a></li><li><a href="#">2</a></li><li><a href="#">3</a></li><li><a href="#">4</a></li><li><a href="#">5</a></li><li><a href="#">»</a></li></ul></body></html>
翻頁實例
<!DOCTYPE html><html><head><meta charset="utf-8"> <title>Bootstrap 實例 - 默認(rèn)的翻頁</title><link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script><script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script></head><body><ul class="pager"><li><a href="#">Previous</a></li><li><a href="#">Next</a></li></ul></body></html>
上述內(nèi)容就是bootstrap中怎么實現(xiàn)分頁，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼
