Foundation 分页 · W3School Foundation 教程

# Foundation 分页如果你的网页有很多内容，就需要使用分页功能。 ![](https://box.kancloud.cn/2015-12-30_5683952ce7a28.png) 要创建一个基础的分页功能需要在 `<ul>` 元素上加上 `.pagination` 类: ### 实例 ``` <ul class="pagination"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> ``` ## 当前页面可以在 `<li>` 加上 `.current` 类来标注当前页面： ### 实例 ``` <ul class="pagination"> <li class="current"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> </ul> ``` ## 禁用分页如果需要设置某个分页不可点击需要使用 `.unavailable` 类： ### 实例 ``` <ul class="pagination"> <li><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> </ul> ``` ## 分页方向在第一个和最后一个 code><li> 元素上添加`.arrow` 类插入 HTML 实体符号 `«` 和 `»` 来创建分页方向符号： ### 实例 ``` <ul class="pagination"> <li class="arrow"><a href="#">«</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><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> ``` ## 分页居中显示我们可以在 <ul> 外层添加 `<div>` 元素，并在 `<div>` 上添加`.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><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> ``` ## 面包屑导航面包屑导航用于展示当前页面的导航结构。在 `<ul>` 元素上添加 `.breadcrumbs` 类来实现面包屑导航。你可以在 <li> 上添加 `.current` 或 `.unavailable` 类设置当前页与不可点击效果: ### 实例 ``` <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> ``` ## 子导航在页面切换上，子导航是非常有用的。在 `<dl>` 元素上添加 `.sub-nav` 类来创建子导航。在 `<dt>` 元素上添加标题，为选中的选项 `<dd>` 添加 `.active` 类: ### 实例 ``` <ul class="sub-nav"> <dt>Filter:</dt> <dd class="active"><a href="#">All</a></dd> <dd><a href="#">Active</a></dd> <dd><a href="#">Pending</a></dd> <dd><a href="#">Suspended</a></dd> </ul> ```