1
在bootstrap中分頁有兩種, 壹種是正常的分頁, 第二種是翻頁. 就是有上壹頁和下壹頁的顯示效果.
1.分頁: 帶有頁面的效果, 這裏妳裏面可以隨妳的網站怎麽定義都可以, 比方說. 裏面不是文字, 而是壹些圖標,壹樣可以. 只不過數字能夠更好的看效果. 使用樣式: .pagination
2.帶有上壹項和下壹項的翻頁效果, 最簡單的方式. 樣式.pager
兩種方法的實現, 都是需要使用ul標簽, 鏈接是使用a. 還有壹些狀態, 比方說, 我選中了某壹項. 其中的某壹項靜止使用.
2
壹個簡單的分頁, 默認的效果. 在ul上加上樣式.pagination, 然後下面就是壹個壹個的li. 然後實現效果, 就如圖所示, 這就是壹個最簡單的默認的樣式. 可以看出來, 實現起來很簡單. 但是效果卻很棒.
3
如何在顯示的頁面上高亮顯示, 標識顯示的是該頁. 這裏使用樣式.active. 來標識選擇的頁面. 查看效果和代碼如圖.
這裏需要註意的是: 在該代碼裏增加了如下的代碼: <span class="sr-only">(current)</span> 是因為, 該代碼表示, 當前頁面不為能點擊. 因為當前頁面, 數據已經刷新出來了. 如果妳想要點擊, 就把這句話去掉.
4
如何在到第壹頁或者尾頁的時候, 讓上壹頁和下壹頁禁止用戶點擊. 這裏可以使用.disabled 樣式來實現. 如圖所示, 讓上壹頁不能點擊. 在不想讓單擊的樣式上加上.disabled 即可.
5
在分頁裏面, 定義了除了默認的樣式大小之外, 還定義了另外兩種樣式.
1 .pagination-lg 比默認樣式大的樣式
2 .pagination-sm 比默認樣式小的樣式
實現代碼對比效果. 左側是放大的樣式, 右側是縮小的樣式.
6
這裏給出的樣式都是最簡單的樣式, 如果需要其他樣式的, 比方說, 不喜歡這個顏色. 等等, 那就需要自己自定義樣式來實現.
END
bootstrap的翻頁
1
用簡單的標記和樣式，就能做個上壹頁和下壹頁的簡單翻頁。比方說博客和文章類的網站, 就很多使用了這樣的樣式. 樣式使用.pager, 效果和代碼如圖, 這裏更加簡單的顯示了上壹頁和下壹頁. 樣式是居中在頁面上. 那如何把上壹項和下壹項放在頁面的兩端呢. 繼續往下看.
2
如何讓按鈕在兩端顯示呢? 這裏使用對齊鏈接. 樣式分別為: .previous 和 .next
實現代碼如圖. 需要註意的是, 這個樣式裏面默認不支持, 使用分頁樣式, 如果想兩種同時使用, 需要自己另外寫代碼.
3
在翻頁這個樣式裏面, 也可以讓上壹篇或者下壹篇禁用, 禁用方法和分頁壹樣, 使用樣式.disabled
4
這兩種樣式, 基本上都能夠支持大多少我們遇到的分頁問題. 還有壹種就是移動端的, 這個的話, 就可以使用壹個鏈接按鈕, 然後異步獲得數據就可以了.