建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap 分頁
本章將講解 Bootstrap 支持的分頁特性。分頁（Pagination），是一種無序列表，Bootstrap 像處理其他界面元素一樣處理分頁。
我們注重客戶提出的每個(gè)要求，我們充分考慮每一個(gè)細(xì)節(jié)，我們積極的做好網(wǎng)站設(shè)計(jì)、做網(wǎng)站服務(wù)，我們努力開拓更好的視野，通過不懈的努力，成都創(chuàng)新互聯(lián)公司贏得了業(yè)內(nèi)的良好聲譽(yù)，這一切，也不斷的激勵(lì)著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計(jì),小程序定制開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實(shí)力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。
分頁（Pagination）
下表列出了 Bootstrap 提供的處理分頁的 class。
| Class | 描述 | 示例代碼 |
|---|---|---|
| .pagination | 添加該 class 來在頁面上顯示分頁。 |
|
| .disabled, .active | 您可以自定義鏈接，通過使用 .disabled 來定義不可點(diǎn)擊的鏈接，通過使用 .active 來指示當(dāng)前的頁面。 |
|
| .pagination-lg, .pagination-sm | 使用這些 class 來獲取不同大小的項(xiàng)。 |
|
默認(rèn)的分頁
下面的實(shí)例演示了上表中所討論的 class .pagination 的用法：
實(shí)例
<
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
>
嘗試一下 ?
結(jié)果如下所示：
分頁的狀態(tài)
下面的實(shí)例演示了上表中所討論的 class .disabled、.active 的用法：
實(shí)例
<
ul
class
=
"
pagination
"
>
<
li
>
<
a
href
=
"
#
"
>
«
a
>
li
>
<
li
class
=
"
active
"
>
<
a
href
=
"
#
"
>
1
a
>
li
>
<
li
class
=
"
disabled
"
>
<
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
>
嘗試一下 ?
結(jié)果如下所示：
分頁的大小
下面的實(shí)例演示了上表中所討論的 class .pagination-* 的用法：
實(shí)例
<
ul
class
=
"
pagination pagination-lg
"
>
<
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
>
<
br
>
<
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
>
<
br
>
<
ul
class
=
"
pagination pagination-sm
"
>
<
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
>
嘗試一下 ?
結(jié)果如下所示：
翻頁（Pager）
如果您想要?jiǎng)?chuàng)建一個(gè)簡單的分頁鏈接為用戶提供導(dǎo)航，可通過翻頁來實(shí)現(xiàn)。與分頁鏈接一樣，翻頁也是無序列表。默認(rèn)情況下，鏈接是居中顯示。下表列出了 Bootstrap 處理翻頁的 class。
| Class | 描述 | 示例代碼 |
|---|---|---|
| .pager | 添加該 class 來獲得翻頁鏈接。 |
|
| .previous, .next | 使用 class .previous 把鏈接向左對齊，使用 .next 把鏈接向右對齊。 |
|
| .disabled | 添加該 class 來設(shè)置對應(yīng)按鈕禁止使用。 |
|
默認(rèn)的翻頁
下面的實(shí)例演示了上表中所討論的 class .pager 的用法：
實(shí)例
<
ul
class
=
"
pager
"
>
<
li
>
<
a
href
=
"
#
"
>
Previous
a
>
li
>
<
li
>
<
a
href
=
"
#
"
>
Next
a
>
li
>
ul
>
嘗試一下 ?
結(jié)果如下所示：
對齊的鏈接
下面的實(shí)例演示了上表中所討論的 class .previous、.next 的用法：
實(shí)例
<
ul
class
=
"
pager
"
>
<
li
class
=
"
previous
"
>
<
a
href
=
"
#
"
>
←
Older
a
>
li
>
<
li
class
=
"
next
"
>
<
a
href
=
"
#
"
>
Newer
→
a
>
li
>
ul
>
嘗試一下 ?
結(jié)果如下所示：
翻頁的狀態(tài)
下面的實(shí)例演示了上表中所討論的 class .disabled 的用法：
實(shí)例
<
ul
class
=
"
pager
"
>
<
li
class
=
"
previous disabled
"
>
<
a
href
=
"
#
"
>
←
Older
a
>
li
>
<
li
class
=
"
next
"
>
<
a
href
=
"
#
"
>
Newer
→
a
>
li
>
ul
>
嘗試一下 ?
結(jié)果如下所示：
分頁更多實(shí)例
| 類 | 描述 | 實(shí)例 |
|---|---|---|
| .pager | 一個(gè)簡單的分頁鏈接，鏈接居中對齊。 | 嘗試一下 |
| .previous | .pager 中上一頁的按鈕樣式，左對齊 | 嘗試一下 |
| .next | .pager 中下一頁的按鈕樣式，右對齊 | 嘗試一下 |
| .disabled | 禁用鏈接 | 嘗試一下 |
| .pagination | 分頁鏈接 | 嘗試一下 |
| .pagination-lg | 更大尺寸的分頁鏈接 | 嘗試一下 |
| .pagination-sm | 更小尺寸的分頁鏈接 | 嘗試一下 |
| .disabled | 禁用鏈接 | 嘗試一下 |
| .active | 當(dāng)前訪問頁面鏈接樣式 | 嘗試一下 |
當(dāng)前題目：創(chuàng)新互聯(lián)Bootstrap教程：Bootstrap分頁
本文鏈接：http://www.5511xx.com/article/cddpgie.html
