Foundation 分页（Pagination）详解（超级完整版，一次讲透）
我们继续你的 Foundation 系列，今天把分页（Pagination）讲得清清楚楚！Foundation 6+ 的 Pagination 组件简单强大，支持居中对齐、禁用状态、无障碍访问，常用于表格底部、搜索结果、文章列表等场景。
1. 基本结构（最常用）
<ulclass="pagination"role="navigation"aria-label="Pagination"><liclass="pagination-previous disabled">上一页</li><!-- disabled 表示禁用 --><liclass="current"><spanclass="show-for-sr">当前页</span>1</li><li><ahref="#"aria-label="Page 2">2</a></li><li><ahref="#"aria-label="Page 3">3</a></li><li><ahref="#"aria-label="Page 4">4</a></li><liclass="ellipsis"aria-hidden="true"></li><!-- 省略号 --><li><ahref="#"aria-label="Page 12">12</a></li><liclass="pagination-next"><ahref="#"aria-label="Next page">下一页</a></li></ul>2. 常见变体
- 居中对齐：加
text-center类到父容器
<divclass="pagination text-center"><!-- pagination ul 同上 --></div>- 简单分页（只有上一页/下一页）
<ulclass="pagination"><liclass="pagination-previous"><ahref="#">上一页</a></li><liclass="pagination-next"><ahref="#">下一页</a></li></ul>- 带箭头（用 Foundation Icons）
<liclass="pagination-previous"><ahref="#"><iclass="fi-arrow-left"></i></a></li><liclass="pagination-next"><ahref="#"><iclass="fi-arrow-right"></i></a></li>3. 无障碍最佳实践
- 用
aria-label描述页面 .show-for-sr隐藏当前页文字，只读屏器可见role="navigation"和aria-label="Pagination"
4. 今天直接给你抄的完整代码（复制就能跑）
<!DOCTYPEhtml><html><head><linkrel="stylesheet"href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation.min.css"></head><body><h3>Foundation Pagination 分页全家福</h3><!-- 标准分页（居中） --><divclass="text-center"><ulclass="pagination"><liclass="pagination-previous disabled">上一页</li><liclass="current"><spanclass="show-for-sr">当前页</span>1</li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><liclass="ellipsis"></li><li><ahref="#">13</a></li><liclass="pagination-next"><ahref="#">下一页</a></li></ul></div><!-- 简单箭头分页 --><ulclass="pagination text-center"style="margin-top:30px;"><liclass="pagination-previous"><ahref="#">« 上一页</a></li><liclass="pagination-next"><ahref="#">下一页 »</a></li></ul><scriptsrc="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script><scriptsrc="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”
“帮我做带文字分页”
“给我表格分页示例”
我立刻给你写好！
)
