Bootstrap 5學習教程，從入門到精通， Bootstrap 5 分頁（Pagination）知識點及案例代碼（13）

Bootstrap 5 分頁（Pagination）知識點及案例代碼

Bootstrap 5 提供了強大的分頁組件，幫助開發者輕松實現分頁功能。以下是關于 Bootstrap 5 分頁的詳細語法知識點以及一個完整的案例代碼，包含詳細注釋，幫助初學者快速上手。

一、分頁組件概述

分頁組件用于在內容較多時進行分頁顯示，提升用戶體驗。Bootstrap 5 的分頁組件包含多種樣式和功能，如普通分頁、帶有圖標的分頁、禁用和激活狀態等。

二、分頁組件的語法知識點

1. 基本結構

分頁組件使用 <ul> 元素，并添加 .pagination 類。每個分頁項使用 <li> 元素，并添加 .page-item 類。鏈接使用 <a> 元素，并添加 .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="#">Next</a></li>
</ul>

2. 激活狀態

使用 .active 類來標識當前頁。

<li class="page-item active"><a class="page-link" href="#">1</a></li>

3. 禁用狀態

使用 .disabled 類來禁用某個分頁項。

<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>

4. 大小調整

通過添加 .pagination-lg 或 .pagination-sm 類來調整分頁的大小。

<ul class="pagination pagination-lg"><!-- 分頁項 -->
</ul>

5. 對齊方式

使用 Flexbox 工具類來調整分頁的對齊方式，如居中、右對齊等。

<ul class="pagination justify-content-center"><!-- 分頁項 -->
</ul>

6. 分頁項的圖標

可以在分頁鏈接中添加圖標，例如使用 Font Awesome 圖標。

<li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
</li>

7. 響應式分頁

結合 Bootstrap 的柵格系統，可以創建響應式分頁。

<div class="d-flex justify-content-center"><ul class="pagination"><!-- 分頁項 --></ul>
</div>

三、案例代碼

以下是一個完整的 Bootstrap 5 分頁示例，包含詳細注釋，展示如何實現基本的分頁功能、激活和禁用狀態、調整大小以及對齊方式。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Bootstrap 5 分頁示例</title><!-- 引入 Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><style>/* 自定義樣式（可選） */.pagination-example {margin: 20px 0;}</style>
</head>
<body><div class="container"><h2 class="mt-5">Bootstrap 5 分頁示例</h2><!-- 基本分頁 --><h4>1. 基本分頁</h4><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><!-- 激活和禁用狀態 --><h4>2. 激活和禁用狀態</h4><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">Previous</a></li><li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></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><!-- 大小調整 --><h4>3. 大小調整</h4><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><br><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><!-- 對齊方式 --><h4>4. 對齊方式</h4><ul class="pagination justify-content-center"><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><br><ul class="pagination justify-content-end"><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><!-- 分頁項的圖標 --><h4>5. 分頁項的圖標</h4><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></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="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul><!-- 響應式分頁 --><h4>6. 響應式分頁</h4><div class="d-flex justify-content-center"><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></div>
</div><!-- 引入 Bootstrap 5 JS（可選） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

代碼說明

引入 Bootstrap 5 CSS 和 JS

<!-- 引入 Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- 引入 Bootstrap 5 JS（可選） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

使用 CDN 引入 Bootstrap 5 的 CSS 和 JS 文件，確保分頁組件的樣式和功能正常。

基本分頁

<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>

創建基本的分頁結構，包含“Previous”和“Next”鏈接，以及頁碼。

激活和禁用狀態

<ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#">Previous</a></li><li class="page-item active"><a class="page-link" href="#">1 <span class="sr-only">(current)</span></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>

.disabled 類用于禁用“Previous”鏈接。
.active 類用于標識當前頁“1”，并使用 <span class="sr-only">(current)</span> 提供輔助功能支持。

大小調整

<ul class="pagination pagination-lg"><!-- 分頁項 -->
</ul>
<br>
<ul class="pagination pagination-sm"><!-- 分頁項 -->
</ul>

.pagination-lg 類用于增大分頁尺寸。
.pagination-sm 類用于減小分頁尺寸。

對齊方式

<ul class="pagination justify-content-center"><!-- 分頁項 -->
</ul>
<br>
<ul class="pagination justify-content-end"><!-- 分頁項 -->
</ul>

.justify-content-center 類用于將分頁居中對齊。
.justify-content-end 類用于將分頁右對齊。

分頁項的圖標

<ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><!-- 其他分頁項 --><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>
</ul>

使用 Font Awesome 圖標（需引入 Font Awesome）或者使用 Bootstrap 內置的符號（如 « 和 »）來添加圖標。

響應式分頁
```
<div class="d-flex justify-content-center"><ul class="pagination"></ul>
</div>
```
使用 Flexbox 工具類 .d-flex 和 .justify-content-center 來實現響應式居中對齊。

四、擴展功能

1. 使用圖標庫

如果需要使用圖標庫（如 Font Awesome），可以在分頁鏈接中添加圖標。例如：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><i class="fas fa-arrow-left"></i></a></li><!-- 其他分頁項 --><li class="page-item"><a class="page-link" href="#" aria-label="Next"><i class="fas fa-arrow-right"></i></a></li>
</ul>

2. 動態分頁

在實際應用中，分頁通常需要與后端數據結合，實現動態分頁。以下是一個簡單的示例，展示如何使用 JavaScript 動態生成分頁項：

<!-- 示例 HTML -->
<div id="pagination-container"></div><!-- 示例 JavaScript -->
<script>const totalPages = 10;const currentPage = 3;const container = document.getElementById('pagination-container');const ul = document.createElement('ul');ul.className = 'pagination';for (let i = 1; i <= totalPages; i++) {const li = document.createElement('li');li.className = 'page-item';if (i === currentPage) {li.classList.add('active');}const a = document.createElement('a');a.className = 'page-link';a.href = '#';a.textContent = i;li.appendChild(a);ul.appendChild(li);}container.appendChild(ul);
</script>

3. 使用 JavaScript 事件處理

可以通過 JavaScript 為分頁鏈接添加事件處理，實現頁面跳轉或數據加載。例如：

<script>document.querySelectorAll('.page-link').forEach(function(element) {element.addEventListener('click', function(event) {event.preventDefault();const page = this.textContent;// 在這里添加跳轉或數據加載邏輯console.log('當前頁:', page);});});
</script>

五.案例代碼

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Bootstrap 5 分頁組件示例</title><!-- 引入 Bootstrap 5 CSS --><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body><div class="container mt-5"><h2 class="mb-4">Bootstrap 5 分頁組件示例</h2><!-- 1. 基本分頁示例 --><section class="mb-5"><h4>1. 基本分頁</h4><nav aria-label="Page navigation example"><ul class="pagination"><li class="page-item"><a class="page-link" href="#">上一頁</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 active" aria-current="page"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#">4</a></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item"><a class="page-link" href="#">下一頁</a></li></ul></nav></section><!-- 2. 禁用和活動狀態 --><section class="mb-5"><h4>2. 禁用和活動狀態</h4><nav aria-label="Disabled and active states"><ul class="pagination"><li class="page-item disabled"><a class="page-link" href="#" tabindex="-1" aria-disabled="true">上一頁</a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item active" aria-current="page"><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="#">下一頁</a></li></ul></nav></section><!-- 3. 分頁對齊方式 --><section class="mb-5"><h4>3. 分頁對齊方式</h4><h5>左對齊（默認）</h5><nav aria-label="Left-aligned pagination"><ul class="pagination"><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></ul></nav><h5 class="mt-3">居中對齊</h5><nav aria-label="Centered pagination"><ul class="pagination justify-content-center"><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></ul></nav><h5 class="mt-3">右對齊</h5><nav aria-label="Right-aligned pagination"><ul class="pagination justify-content-end"><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></ul></nav></section><!-- 4. 分頁尺寸 --><section class="mb-5"><h4>4. 分頁尺寸</h4><h5>大尺寸分頁 (.pagination-lg)</h5><nav aria-label="Large pagination"><ul class="pagination pagination-lg"><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></ul></nav><h5 class="mt-3">默認尺寸</h5><nav aria-label="Default pagination"><ul class="pagination"><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></ul></nav><h5 class="mt-3">小尺寸分頁 (.pagination-sm)</h5><nav aria-label="Small pagination"><ul class="pagination pagination-sm"><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></ul></nav></section><!-- 5. 帶圖標的分頁 --><section class="mb-5"><h4>5. 帶圖標的分頁</h4><nav aria-label="Page navigation with icons"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="First"><span aria-hidden="true">&laquo;&laquo;</span></a></li><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></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 active"><a class="page-link" href="#">3</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li><li class="page-item"><a class="page-link" href="#" aria-label="Last"><span aria-hidden="true">&raquo;&raquo;</span></a></li></ul></nav></section><!-- 6. 帶省略號的分頁（長列表） --><section class="mb-5"><h4>6. 帶省略號的分頁（長列表）</h4><nav aria-label="Page navigation with ellipsis"><ul class="pagination"><li class="page-item"><a class="page-link" href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li><li class="page-item"><a class="page-link" href="#">1</a></li><li class="page-item disabled"><span class="page-link">...</span></li><li class="page-item"><a class="page-link" href="#">5</a></li><li class="page-item active"><a class="page-link" href="#">6</a></li><li class="page-item"><a class="page-link" href="#">7</a></li><li class="page-item disabled"><span class="page-link">...</span></li><li class="page-item"><a class="page-link" href="#">12</a></li><li class="page-item"><a class="page-link" href="#" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li></ul></nav></section></div><!-- 引入 Bootstrap 5 JS 及其依賴 --><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>