Foundation 分页（Pagination）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把 分页（Pagination）讲得清清楚楚！Foundation 6+ 的 Pagination 组件简单强大，支持居中对齐、禁用状态、无障碍访问，常用于表格底部、搜索结果、文章列表等场景。
1. 基本结构（最常用）
<ul class="pagination" role="navigation" aria-label="Pagination">
<li class="pagination-previous disabled">上一页</li> <!-- disabled 表示禁用 -->
<li class="current"><span class="show-for-sr">当前页</span> 1</li>
<li><a href="#" aria-label="Page 2">2</a></li>
<li><a href="#" aria-label="Page 3">3</a></li>
<li><a href="#" aria-label="Page 4">4</a></li>
<li class="ellipsis" aria-hidden="true"></li> <!-- 省略号 -->
<li><a href="#" aria-label="Page 12">12</a></li>
<li class="pagination-next"><a href="#" aria-label="Next page">下一页</a></li>
</ul>2. 常见变体
- 居中对齐：加
text-center类到父容器
<div class="pagination text-center">
<!-- pagination ul 同上 -->
</div>- 简单分页（只有上一页/下一页）
<ul class="pagination">
<li class="pagination-previous"><a href="#">上一页</a></li>
<li class="pagination-next"><a href="#">下一页</a></li>
</ul>- 带箭头（用 Foundation Icons）
<li class="pagination-previous"><a href="#"><i class="fi-arrow-left"></i></a></li>
<li class="pagination-next"><a href="#"><i class="fi-arrow-right"></i></a></li>3. 无障碍最佳实践
- 用
aria-label描述页面 .show-for-sr隐藏当前页文字，只读屏器可见role="navigation"和aria-label="Pagination"
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css">
</head>
<body>
<h3>Foundation Pagination 分页全家福</h3>
<!-- 标准分页（居中） -->
<div class="text-center">
<ul class="pagination">
<li class="pagination-previous disabled">上一页</li>
<li class="current"><span class="show-for-sr">当前页</span>1</li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="ellipsis"></li>
<li><a href="#">13</a></li>
<li class="pagination-next"><a href="#">下一页</a></li>
</ul>
</div>
<!-- 简单箭头分页 -->
<ul class="pagination text-center" style="margin-top:30px;">
<li class="pagination-previous"><a href="#">« 上一页</a></li>
<li class="pagination-next"><a href="#">下一页 »</a></li>
</ul>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js"></script>
<script>$(document).foundation();</script>
</body>
</html>下面给你看真实效果（官方文档和项目中最标准的 Foundation Pagination 示例）：
官方文档（最新版）：https://get.foundation/sites/docs/pagination.html
你现在想干嘛？
→ 明天继续讲 Foundation 表格（Table）还是面包屑（Breadcrumbs）？
→ 帮我做一个带“共 156 条，第 1/13 页”文字的分页？
→ 给我一个结合表格的完整分页示例？
直接回复下一句：
“明天讲 table”
“帮我做带文字分页”
“给我表格分页示例”
我立刻给你写好！
