Bootstrap5分頁組件：列表分頁實現快速方法

在網頁開發中，當我們需要展示大量列表數據（如商品列表、文章列表等）時，直接將所有數據顯示在一頁會導致頁面過長、加載緩慢，用戶體驗差。這時，分頁組件就派上用場了——它可以將數據分成多頁，讓用戶通過點擊不同頁碼來瀏覽內容。Bootstrap5 提供了現成的分頁組件，無需複雜的 CSS 或 JavaScript 代碼，只需簡單的 HTML 結構和類名就能快速實現美觀且功能完整的分頁效果。

一、準備工作：引入 Bootstrap5¶

要使用 Bootstrap5 的分頁組件，首先需要在項目中引入 Bootstrap5 的 CSS（如果需要交互功能，還需引入 JavaScript）。以下是最簡單的引入方式（使用 CDN）：

<!-- 引入 Bootstrap5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">

<!-- （可選）引入 Bootstrap5 JS（若需要下拉菜單、模態框等交互功能） -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

如果需要在分頁中使用圖標（如“上一頁/下一頁”的箭頭），還需引入 Bootstrap Icons（同樣用 CDN）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">

二、Bootstrap5 分頁組件的基本結構¶

Bootstrap5 的分頁組件基於列表（<ul>）和列表項（<li>）構建，通過特定的類名控制樣式和狀態。核心結構如下：

<ul class="pagination">
  <!-- 上一頁按鈕 -->
  <li class="page-item"><a class="page-link" href="#">上一頁</a></li>

  <!-- 頁碼項 -->
  <li class="page-item active"><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="#">下一頁</a></li>
</ul>

關鍵類名解釋：¶

pagination：給 <ul> 標籤添加，定義分頁容器的基礎樣式（如間距、圓角等）。
page-item：給 <li> 標籤添加，定義每個頁碼/按鈕的容器。
page-link：給 <a> 標籤（或 <button>）添加，定義可點擊鏈接的樣式（如顏色、邊框等）。
active：給當前頁碼的 <li> 標籤添加，高亮顯示當前頁（如背景色、邊框等）。
disabled：給禁用的頁碼/按鈕的 <li> 標籤添加，使其不可點擊（如“上一頁”在第一頁時禁用）。

三、常見分頁場景與示例¶

上面的示例已經是最基礎的分頁結構，包含“上一頁”“1”“2”“3”“下一頁”。其中：
- active 用於標記當前頁碼（如“1”），頁面加載時默認顯示在第一頁。
- href="#" 是佔位符，實際項目中需替換爲對應頁碼的 URL（如 href="?page=2"）。

2. 禁用狀態（邊界頁處理）¶

當頁碼處於邊界（如第一頁時“上一頁”不可點擊，最後一頁時“下一頁”不可點擊），需給對應 <li> 添加 disabled 類：

<ul class="pagination">
  <!-- 第一頁時禁用“上一頁” -->
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">上一頁</a>
  </li>

  <li class="page-item active"><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 disabled">
    <a class="page-link" href="#" tabindex="-1">下一頁</a>
  </li>
</ul>

tabindex="-1"：可選屬性，用於確保禁用狀態的元素在鍵盤導航中無法被聚焦（提升無障礙性）。

3. 居中對齊分頁¶

通過 Bootstrap 的 Flex 佈局類 .justify-content-center，讓分頁內容居中顯示：

<ul class="pagination justify-content-center">
  <!-- 頁碼項同上 -->
</ul>

4. 帶圖標的分頁¶

結合 Bootstrap Icons，給“上一頁/下一頁”添加箭頭圖標，更直觀：

<ul class="pagination">
  <li class="page-item disabled">
    <a class="page-link" href="#" tabindex="-1">
      <i class="bi bi-arrow-left"></i> 上一頁
    </a>
  </li>

  <li class="page-item active"><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="#">下一頁 <i class="bi bi-arrow-right"></i></a>
  </li>
</ul>

5. 調整分頁尺寸¶

Bootstrap5 提供了 .pagination-sm（小尺寸）和 .pagination-lg（大尺寸）類，快速調整分頁大小：

<!-- 小尺寸分頁 -->
<ul class="pagination pagination-sm">...</ul>

<!-- 大尺寸分頁 -->
<ul class="pagination pagination-lg">...</ul>

四、擴展與最佳實踐¶

替換 <a> 爲 <button>：如果頁碼是通過 JavaScript 動態加載數據（而非頁面跳轉），可將 <a> 改爲 <button>，並添加 onclick 事件處理：

   <li class="page-item"><button class="page-link" onclick="loadPage(2)">2</button></li>

動態生成頁碼：實際項目中，頁碼數量可能根據總數據量變化（如總頁數 10 時顯示 1-10，總頁數 20 時顯示 1-5 等），可通過後端接口返回總頁數，前端用 JavaScript 循環生成頁碼項。
語義化與 SEO：避免使用 href="#" 佔位符，建議用實際的 URL（如 href="/products?page=2"），方便搜索引擎抓取和用戶直接訪問。

總結¶

Bootstrap5 分頁組件通過簡單的 HTML 結構和 CSS 類名，即可快速實現美觀、響應式的分頁效果，無需重複編寫樣式。初學者只需掌握核心類名（pagination、page-item、page-link）和狀態標記（active、disabled），就能應對大部分分頁場景。如果需要更復雜的交互（如動態加載數據），可在此基礎上結合 JavaScript 實現。