CSS Pagination 分頁樣式設計

分頁導航（Pagination）是用於連結一系列相關內容的重要介面元素。一個好的分頁設計應該能讓使用者清晰地知道自己目前所在的頁數，並且能輕易地跳轉到其他頁面。

本篇介紹如何使用 Flexbox 實作各種常見的的分頁佈局樣式。

基本分頁結構

我們通常使用 <ul> 或 <nav> 來包裝分頁連結。

<nav class="pagination-container">
  <ul class="pagination">
    <li class="page-item disabled"><a href="#">上一頁</a></li>
    <li class="page-item active"><a href="#">1</a></li>
    <li class="page-item"><a href="#">2</a></li>
    <li class="page-item"><a href="#">3</a></li>
    <li class="page-item"><a href="#">...</a></li>
    <li class="page-item"><a href="#">10</a></li>
    <li class="page-item"><a href="#">下一頁</a></li>
  </ul>
</nav>

實作預覽

這段程式碼會產生一個水平排列的分頁條，目前選中的頁碼（1）會呈現藍色底白字，其它頁碼則有灰色邊框。

核心 CSS 樣式

.pagination {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 8px; /* 按鈕之間的間距 */
  justify-content: center; /* 水平置中 */
}

.page-item a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #007bff;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  transition: all 0.2s;
}

/* 懸停效果 */
.page-item a:hover {
  background-color: #e9ecef;
  border-color: #dee2e6;
}

/* 目前選中頁面 (Active) */
.page-item.active a {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* 禁用狀態 (Disabled) */
.page-item.disabled a {
  color: #6c757d;
  pointer-events: none; /* 防止點擊 */
  background-color: #fff;
  border-color: #dee2e6;
  cursor: not-allowed;
}

不同風格的分頁

圓形按鈕風格

這在現代、簡潔的網頁設計中非常受歡迎。

.pagination-round .page-item a {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%; /* 變成圓形 */
}

<ul class="pagination-round">
  <li class="page-item"><a href="#">1</a></li>
  <li class="page-item"><a href="#">2</a></li>
  <li class="page-item active"><a href="#">3</a></li>
  <li class="page-item"><a href="#">4</a></li>
  <li class="page-item"><a href="#">5</a></li>
</ul>

實作預覽

透過 border-radius: 50%，分頁按鈕會從矩形變成完美的正圓形，提供更具現代感的視覺回饋。

僅帶底線的簡約風格

常用於部落格文章列表的底部。

.pagination-minimal .page-item a {
  border: none;
  background: transparent;
  color: #333;
}

.pagination-minimal .page-item.active a {
  border-bottom: 2px solid #000;
  border-radius: 0;
  color: #000;
  font-weight: bold;
}

<ul class="pagination-minimal">
  <li class="page-item"><a href="#">Prev</a></li>
  <li class="page-item"><a href="#">1</a></li>
  <li class="page-item"><a href="#">2</a></li>
  <li class="page-item active"><a href="#">3</a></li>
  <li class="page-item"><a href="#">4</a></li>
  <li class="page-item"><a href="#">5</a></li>
  <li class="page-item"><a href="#">Next</a></li>
</ul>

實作預覽

響應式考量

在手機等窄版螢幕上，分頁按鈕數量太多會導致換行或溢出。

1. 隱藏中間頁碼：僅顯示「首頁」、「末頁」以及「目前頁碼」的前後各一頁。
2. 使用較大的點擊區域：確保行動裝置的使用者能輕易點擊到數字，建議按鈕至少要有 40x40px。
3. 改用「載入更多」：在行動裝置上，無限捲動（Infinite Scroll）或「載入更多」按鈕有時是比分頁導航更好的選擇。