掃二維碼與項(xiàng)目經(jīng)理溝通
我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流
網(wǎng)頁(yè)開(kāi)發(fā)過(guò)程,如果碰到內(nèi)容過(guò)多,一般都會(huì)做分頁(yè)處理。

創(chuàng)新互聯(lián)建站主要從事做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)祿勸,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):028-86922220
Bootstrap 5 可以很簡(jiǎn)單的實(shí)現(xiàn)分頁(yè)效果。
要?jiǎng)?chuàng)建一個(gè)基本的分頁(yè)可以在
<
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è)可以使用 .active 類來(lái)高亮顯示:
<
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
>
嘗試一下 ?
.disabled 類可以設(shè)置分頁(yè)鏈接不可點(diǎn)擊:
<
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è)條目設(shè)置為不同的大小。
.pagination-lg 類設(shè)置大字體的分頁(yè)條目,.pagination-sm 類設(shè)置小字體的分頁(yè)條目:
<
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
>
嘗試一下 ?
可以使用工具類來(lái)設(shè)置分頁(yè)的對(duì)齊方式:
<
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
>
嘗試一下 ?
.breadcrumb 和 .breadcrumb-item 類用于設(shè)置面包屑導(dǎo)航:
<
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
>
嘗試一下 ?

我們?cè)谖⑿派?4小時(shí)期待你的聲音
解答本文疑問(wèn)/技術(shù)咨詢/運(yùn)營(yíng)咨詢/技術(shù)建議/互聯(lián)網(wǎng)交流