閱讀(74.7k) 書簽贊(12) 我要糾錯(cuò)

Bootstrap 分頁(yè)

2022-05-21 15:19 更新

Bootstrap 分頁(yè)

本章將講解 Bootstrap 支持的分頁(yè)特性。分頁(yè)（Pagination），是一種無(wú)序列表，Bootstrap 像處理其他界面元素一樣處理分頁(yè)。

分頁(yè)（Pagination）

下表列出了 Bootstrap 提供的處理分頁(yè)的 class。

Class	描述	示例代碼
.pagination	添加該 class 來(lái)在頁(yè)面上顯示分頁(yè)。	<ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul>
.disabled, .active	您可以自定義鏈接，通過(guò)使用 .disabled 來(lái)定義不可點(diǎn)擊的鏈接，通過(guò)使用 .active 來(lái)指示當(dāng)前的頁(yè)面。	<ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul>
.pagination-lg, .pagination-sm	使用這些 class 來(lái)獲取不同大小的項(xiàng)。	<ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul>

默認(rèn)的分頁(yè)

下面的實(shí)例演示了上表中所討論的 class .pagination 的用法：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 默認(rèn)的分頁(yè)</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<ul class="pagination">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>


</body>
</html>

結(jié)果如下所示：

標(biāo)記分頁(yè)組件
分頁(yè)組件應(yīng)該包裝在 <nav> 元素中，以將其標(biāo)識(shí)為屏幕閱讀器和其他輔助技術(shù)的導(dǎo)航部分。此外，由于一個(gè)頁(yè)面可能已經(jīng)有多個(gè)這樣的導(dǎo)航部分（例如標(biāo)題中的主導(dǎo)航或側(cè)欄導(dǎo)航），建議為 <nav> 提供一個(gè)描述性的 aria 標(biāo)簽，以反映其用途。例如，如果分頁(yè)組件用于在一組搜索結(jié)果之間導(dǎo)航，則適當(dāng)?shù)臉?biāo)簽可以是aria label=“search results pages”。

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

鏈接在不同情況下可以定制。你可以給不能點(diǎn)擊的鏈接添加 .disabled 類、給當(dāng)前頁(yè)添加 .active 類。

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>
    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
    ...
  </ul>
</nav>

我們建議將 active 或 disabled 狀態(tài)的鏈接（即 <a> 標(biāo)簽）替換為 <span> 標(biāo)簽，或者在向前/向后的箭頭處省略<a> 標(biāo)簽，這樣就可以讓其保持需要的樣式而不能被點(diǎn)擊。

<nav aria-label="...">
  <ul class="pagination">
    <li class="disabled">
      <span>
        <span aria-hidden="true">&laquo;</span>
      </span>
    </li>
    <li class="active">
      <span>1 <span class="sr-only">(current)</span></span>
    </li>
    ...
  </ul>
</nav>

尺寸

想要更小或更大的分頁(yè)？.pagination-lg 或 .pagination-sm 類提供了額外可供選擇的尺寸。 Snipaste_2020-09-02_18-02-47

<nav aria-label="..."><ul class="pagination pagination-lg">...</ul></nav>
<nav aria-label="..."><ul class="pagination">...</ul></nav>
<nav aria-label="..."><ul class="pagination pagination-sm">...</ul></nav>

分頁(yè)的狀態(tài)

下面的實(shí)例演示了上表中所討論的 class .disabled、.active 的用法：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 分頁(yè)的狀態(tài)</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<ul class="pagination">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>


</body>
</html>

結(jié)果如下所示：

分頁(yè)的大小

下面的實(shí)例演示了上表中所討論的 class .pagination-* 的用法：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 分頁(yè)的大小</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<ul class="pagination pagination-lg">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination">
  <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul><br>
<ul class="pagination pagination-sm">
 <li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

</body>
</html>

結(jié)果如下所示：

翻頁(yè)（Pager）

如果您想要?jiǎng)?chuàng)建一個(gè)簡(jiǎn)單的分頁(yè)鏈接為用戶提供導(dǎo)航，可通過(guò)翻頁(yè)來(lái)實(shí)現(xiàn)。與分頁(yè)鏈接一樣，翻頁(yè)也是無(wú)序列表。默認(rèn)情況下，鏈接是居中顯示。下表列出了 Bootstrap 處理翻頁(yè)的 class。

Class	描述	示例代碼
.pager	添加該 class 來(lái)獲得翻頁(yè)鏈接。	<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
.previous, .next	使用 class .previous 把鏈接向左對(duì)齊，使用 .next 把鏈接向右對(duì)齊。	<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
.disabled	添加該 class 來(lái)獲得一個(gè)顏色變淡的外觀。	<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>

Class

描述

示例代碼

.pager

添加該 class 來(lái)獲得翻頁(yè)鏈接。

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

.previous, .next

使用 class .previous 把鏈接向左對(duì)齊，使用 .next 把鏈接向右對(duì)齊。

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

.disabled

添加該 class 來(lái)獲得一個(gè)顏色變淡的外觀。

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

默認(rèn)的翻頁(yè)

下面的實(shí)例演示了上表中所討論的 class .pager 的用法：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 默認(rèn)的翻頁(yè)</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<ul class="pager">
  <li><a href="#">Previous</a></li>
  <li><a href="#">Next</a></li>
</ul>

</body>
</html>

結(jié)果如下所示：

對(duì)齊的鏈接

下面的實(shí)例演示了上表中所討論的 class .previous、.next 的用法：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 翻頁(yè)中對(duì)齊的鏈接</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<ul class="pager">
  <li class="previous"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

</body>
</html>

結(jié)果如下所示：

翻頁(yè)的狀態(tài)

下面的實(shí)例演示了上表中所討論的 class .disabled 的用法：

<!DOCTYPE html>
<html>
<head>
   <title>Bootstrap 實(shí)例 - 翻頁(yè)的狀態(tài)</title>
   <link  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="external nofollow" target="_blank"  rel="stylesheet">
   <script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
   <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" ></script>
</head>
<body>

<ul class="pager">
  <li class="previous disabled"><a href="#">&larr; Older</a></li>
  <li class="next"><a href="#">Newer &rarr;</a></li>
</ul>

</body>
</html>

結(jié)果如下所示：

以上內(nèi)容是否對(duì)您有幫助：

← Bootstrap 面包屑導(dǎo)航

Bootstrap 標(biāo)簽 →

寫筆記

我要補(bǔ)充

Bootstrap 分頁(yè)

Bootstrap 分頁(yè)

分頁(yè)（Pagination）

默認(rèn)的分頁(yè)

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

尺寸

分頁(yè)的狀態(tài)

分頁(yè)的大小

翻頁(yè)（Pager）

默認(rèn)的翻頁(yè)

對(duì)齊的鏈接

翻頁(yè)的狀態(tài)

推薦文章

推薦教程

推薦課程