Foundation 分页与面包屑导航
一、分页（Pagination）
1.1 概述
当网页内容较多时，分页组件可以帮助用户分段浏览数据。Foundation 的分页组件通过 <ul class="pagination"> 实现，支持当前页高亮、禁用状态、方向箭头等功能。
1.2 核心类说明
| 类名 | 作用 | 添加位置 |
|---|---|---|
.current | 标记当前所在页码 | <li> |
.unavailable | 设置页码不可点击（如省略号或禁用页） | <li> |
.arrow | 为方向按钮添加样式（配合 « »） | <li> |
.pagination-centered | 将分页整体居中显示 | 外层 <div> |
1.3 基础分页
<ul class="pagination">
<li class="arrow"><a href="#">«</a></li>
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="unavailable"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="arrow"><a href="#">»</a></li>
</ul>Code language: HTML, XML (xml)
«渲染为«（上一页），»渲染为»（下一页）。.unavailable类使页码显示为灰色且不可交互。
1.4 居中分页
在 <ul class="pagination"> 外层包裹 <div class="pagination-centered"> 即可实现分页居中：
<div class="pagination-centered">
<ul class="pagination">
<li class="arrow"><a href="#">«</a></li>
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="unavailable"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="arrow"><a href="#">»</a></li>
</ul>
</div>Code language: HTML, XML (xml)二、面包屑导航（Breadcrumbs）
2.1 概述
面包屑导航用于展示当前页面在网站结构中的位置路径，帮助用户了解所处层级并快速返回上级页面。
2.2 核心类说明
| 类名 | 作用 | 添加位置 |
|---|---|---|
.breadcrumbs | 声明面包屑容器 | <ul> |
.current | 标记当前页面（最后一项，无链接） | <li> |
.unavailable | 设置某项不可点击 | <li> |
2.3 基础面包屑导航
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li class="unavailable"><a href="#">Pictures</a></li>
<li class="current">Vacation</li>
</ul>Code language: HTML, XML (xml)面包屑的最后一项通常为当前页面，使用
.current类且不包裹<a>链接。中间层级可使用.unavailable标记暂时不可访问的节点。
三、完整可运行示例
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Foundation 分页与面包屑导航示例</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="foundation-5.5.3/css/foundation.css" rel="stylesheet" />
<script src="foundation-5.5.3/js/vendor/jquery.js"></script>
<script src="foundation-5.5.3/js/foundation.min.js"></script>
<script src="foundation-5.5.3/js/vendor/modernizr.js"></script>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
<style>
.row {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="row">
<div class="medium-12 columns">
<h3>基础分页</h3>
<ul class="pagination">
<li class="arrow"><a href="#">«</a></li>
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="unavailable"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="arrow"><a href="#">»</a></li>
</ul>
<hr />
<h3>居中分页</h3>
<div class="pagination-centered">
<ul class="pagination">
<li class="arrow"><a href="#">«</a></li>
<li class="current"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li class="unavailable"><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="arrow"><a href="#">»</a></li>
</ul>
</div>
<hr />
<h3>面包屑导航</h3>
<ul class="breadcrumbs">
<li><a href="#">Home</a></li>
<li><a href="#">Private</a></li>
<li class="unavailable"><a href="#">Pictures</a></li>
<li class="current">Vacation</li>
</ul>
<hr />
<h3>面包屑导航（更多层级示例）</h3>
<ul class="breadcrumbs">
<li><a href="#">首页</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">电子产品</a></li>
<li class="current">智能手机</li>
</ul>
</div>
</div>
</body>
</html>Code language: HTML, XML (xml)四、使用要点小结
分页
| 功能 | 实现方式 |
|---|---|
| 创建分页 | <ul class="pagination"> |
| 当前页高亮 | <li class="current"> |
| 禁用页码 | <li class="unavailable"> |
| 方向箭头 | <li class="arrow"> + « / » |
| 居中显示 | 外层包裹 <div class="pagination-centered"> |
面包屑导航
| 功能 | 实现方式 |
|---|---|
| 创建面包屑 | <ul class="breadcrumbs"> |
| 当前页面 | <li class="current">（无链接） |
| 不可点击项 | <li class="unavailable"> |
| 层级分隔符 | Foundation 自动渲染（无需手动添加） |
Previous: 选项卡导航（Tabs）
Next: 顶部导航栏（Top Bar）