建站
咨詢
售后
建站咨詢
新聞中心
Bootstrap5 分頁
網(wǎng)頁開發(fā)過程，如果碰到內(nèi)容過多，一般都會做分頁處理。
創(chuàng)新互聯(lián)建站主要從事做網(wǎng)站、網(wǎng)站制作、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)祿勸,10多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220
Bootstrap 5 可以很簡單的實現(xiàn)分頁效果。
要創(chuàng)建一個基本的分頁可以在
- 元素上添加 .pagination 類。然后在
- 元素上添加 .page-item 類，
- 元素的 標簽上添加 .page-link 類:
實例
<
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
>
嘗試一下 ?當前頁頁碼狀態(tài)
當前頁可以使用 .active 類來高亮顯示：
實例
<
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è)置分頁鏈接不可點擊:
實例
<
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
>
嘗試一下 ?分頁顯示大小
可以將分頁條目設(shè)置為不同的大小。
.pagination-lg 類設(shè)置大字體的分頁條目，.pagination-sm 類設(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
>
嘗試一下 ?分頁的對齊方式
可以使用工具類來設(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
>
嘗試一下 ?面包屑導航
.breadcrumb 和 .breadcrumb-item 類用于設(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
>
嘗試一下 ?
本文標題：創(chuàng)新互聯(lián)Bootstrap5教程：Bootstrap5分頁
標題鏈接：http://m.fisionsoft.com.cn/article/djoosjd.html
