此外，網(wǎng)頁可能有不止一個這樣的導(dǎo)航部分（存在多個導(dǎo)" />

国产成人精品无码青草_亚洲国产美女精品久久久久∴_欧美人与鲁交大毛片免费_国产果冻豆传媒麻婆精东

15158846557 或 在線咨詢 在線咨詢
15158846557 或 在線咨詢
所在位置： 首頁 > 營銷資訊 > 網(wǎng)站運(yùn)營 > Bootstrap的分頁樣式

Bootstrap的分頁樣式

時間：2023-06-07 01:54:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-06-07 01:54:01 來源：網(wǎng)站運(yùn)營

Bootstrap的分頁樣式：分頁是使用list列表元素構(gòu)建的，因此屏幕閱讀器可以讀出鏈接的數(shù)量，使用<nav>元素將其識別為屏幕閱讀器和其它輔助技術(shù)的導(dǎo)航組件并提供輔助支持。

此外，網(wǎng)頁可能有不止一個這樣的導(dǎo)航部分（存在多個導(dǎo)航組件），建議您為<nav>提供一個aria-label的描述，以反映其功能。

示例

<div class="col"> <ul class="pagination"> <!-- <li class="page-item"><a href="#" class="page-link">上一頁</a></li> --> <li class="page-item"><a href="#" class="page-link"><span>&laquo;</span></a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <!-- <li class="page-item"><a href="#" class="page-link">下一頁</a></li> --> <li class="page-item"><a href="#" class="page-link"><span>&raquo;</span></a></li> </ul></div>

禁用和活動狀態(tài)

使用.active可指引標(biāo)示當(dāng)前所在的分頁。

.disabled使用pointer-events: none來禁用<a>的鏈接功能。

<div class="row mt-5"> <!-- span標(biāo)簽代替a標(biāo)簽，激活以及禁用狀態(tài) --> <div class="col"> <ul class="pagination"> <li class="page-item disabled"><span class="page-link">上一頁</span></li> <li class="page-item"><span class="page-link">1</span></li> <li class="page-item active"><span class="page-link">2</span></li> <li class="page-item"><span class="page-link">3</span></li> <li class="page-item"><span class="page-link">下一頁</span></li> </ul> </div></div>

尺寸

要更大或更小的分頁，添加.pagination-lg或.pagination-sm樣式定義可以獲得大規(guī)格或小規(guī)格尺寸的分頁組件。

<!-- 尺寸 --><div class="row mt-5"> <div class="col"> <ul class="pagination pagination-lg"> <li class="page-item"><a href="#" class="page-link">上一頁</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一頁</a></li> </ul> </div></div><div class="row"> <div class="col"> <ul class="pagination"> <li class="page-item"><a href="#" class="page-link">上一頁</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一頁</a></li> </ul> </div></div><div class="row"> <div class="col"> <ul class="pagination pagination-sm"> <li class="page-item"><a href="#" class="page-link">上一頁</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一頁</a></li> </ul> </div></div>

對齊

使用flexbox彈性布局通用樣式，可更改分頁組件的對齊方式。

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <title>Bootstrap的分頁樣式</title></head><body> <div class="container"> <!-- 對齊方式 --> <div class="row mt-5"> <div class="col"> <ul class="pagination justify-content-end"> <li class="page-item"><a href="#" class="page-link">上一頁</a></li> <li class="page-item"><a href="#" class="page-link">1</a></li> <li class="page-item"><a href="#" class="page-link">2</a></li> <li class="page-item"><a href="#" class="page-link">3</a></li> <li class="page-item"><a href="#" class="page-link">下一頁</a></li> </ul> </div> </div> </div></body></html>

關(guān)鍵詞：樣式

74
73
25
news

版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。

為了最佳展示效果，本站不支持IE9及以下版本的瀏覽器，建議您使用谷歌Chrome瀏覽器。 點(diǎn)擊下載Chrome瀏覽器
關(guān)閉