溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是bootstrap分頁的實現方法介紹，很多人都不太了解，今天小編為了讓大家更加了解bootstrap分頁的實現方法，所以給大家總結了以下內容，一起往下看吧。一定會有所收獲的哦。
任何一個網頁里面, 我們都可以看到分頁, 不管是移動端, 還是pc端, 不管是下拉到下一頁, 還是按鈕下一頁, 都需要分頁支撐你的網站. 這樣首先, 可以提高你的網站的訪問效率. 另外頁面展現也更加好看, 要不然, 上百萬的上千萬的數據. 顯示估計一兩個小時也顯示不出來效果.
怎么使用bootstrap實現分頁呢?
在bootstrap中分頁有兩種, 一種是正常的分頁, 第二種是翻頁. 就是有上一頁和下一頁的顯示效果.
分頁: 帶有頁面的效果, 這里你里面可以隨你的網站怎么定義都可以, 比方說. 里面不是文字, 而是一些圖標,一樣可以. 只不過數字能夠更好的看效果. 使用樣式: .pagination
分頁（Pagination），是一種無序列表，Bootstrap 像處理其他界面元素一樣處理分頁。
帶有上一項和下一項的翻頁效果, 最簡單的方式. 樣式.pager
（Pager）翻頁，如果您想要創建一個簡單的分頁鏈接為用戶提供導航，可通過翻頁來實現。與分頁鏈接一樣，翻頁也是無序列表。
兩種方法的實現, 都是需要使用ul標簽, 鏈接是使用a. 還有一些狀態, 比方說, 我選中了某一項. 其中的某一項靜止使用.
分頁實例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 實例 - 默認的分頁</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 實例 - 默認的翻頁</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>
以上就是bootstrap分頁的實現方法介紹的詳細內容了，看完之后是否有所收獲呢？如果想了解更多相關內容，歡迎來億速云行業資訊！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
