實(shí)例

<
ul

class
=
"
pagination
"
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Previous
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
1
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
2
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
3
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Next
a
>
li
>

ul
>

嘗試一下 ?

當(dāng)前頁(yè)頁(yè)碼狀態(tài)

當(dāng)前頁(yè)可以使用 .active 類來(lái)高亮顯示：

實(shí)例

<
ul

class
=
"
pagination
"
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Previous
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
1
a
>
li
>

<
li

class
=
"
page-item active
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
2
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
3
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Next
a
>
li
>

ul
>

嘗試一下 ?

不可點(diǎn)擊的分頁(yè)鏈接

.disabled 類可以設(shè)置分頁(yè)鏈接不可點(diǎn)擊:

實(shí)例

<
ul

class
=
"
pagination
"
>

<
li

class
=
"
page-item disabled
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Previous
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
1
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
2
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
3
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Next
a
>
li
>

ul
>

嘗試一下 ?

分頁(yè)顯示大小

可以將分頁(yè)條目設(shè)置為不同的大小。

.pagination-lg 類設(shè)置大字體的分頁(yè)條目，.pagination-sm 類設(shè)置小字體的分頁(yè)條目:

實(shí)例

<
ul

class
=
"
pagination pagination-lg
"
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Previous
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
1
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
2
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
3
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Next
a
>
li
>

ul
>

<
ul

class
=
"
pagination pagination-sm
"
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Previous
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
1
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
2
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
3
a
>
li
>

<
li

class
=
"
page-item
"
>
<
a

class
=
"
page-link
"

href
=
"
#
"
>
Next
a
>
li
>

ul
>

嘗試一下 ?

分頁(yè)的對(duì)齊方式

可以使用工具類來(lái)設(shè)置分頁(yè)的對(duì)齊方式：

實(shí)例

<
ul

class
=
"
pagination
"

style
=
"
margin:20px 0
"
>

<
li

class
=
"
page-item
"
>
...
li
>

ul
>



<
ul

class
=
"
pagination justify-content-center
"

style
=
"
margin:20px 0
"
>

<
li

class
=
"
page-item
"
>
...
li
>

ul
>



<
ul

class
=
"
pagination justify-content-end
"

style
=
"
margin:20px 0
"
>

<
li

class
=
"
page-item
"
>
...
li
>

ul
>

嘗試一下 ?

面包屑導(dǎo)航

.breadcrumb 和 .breadcrumb-item 類用于設(shè)置面包屑導(dǎo)航：

實(shí)例

<
ul

class
=
"
breadcrumb
"
>

<
li

class
=
"
breadcrumb-item
"
>
<
a

href
=
"
#
"
>
Photos
a
>
li
>

<
li

class
=
"
breadcrumb-item
"
>
<
a

href
=
"
#
"
>
Summer 2017
a
>
li
>

<
li

class
=
"
breadcrumb-item
"
>
<
a

href
=
"
#
"
>
Italy
a
>
li
>

<
li

class
=
"
breadcrumb-item active
"
>
Rome
li
>

ul
>

嘗試一下 ?