Foundation 分页简介

1.软文推荐

2.软文推荐

3.软文推荐

如果你的网页有很多内容，就需要使用分页功能。

创建一个基础的分页功能需要在

元素上加上 .pagination 类:

实例

"pagination">
  "#">1
  "#">2
  "#">3
  "#">4
  "#">5

当前页面

可以在

加上 .current 类来标注当前页面：

实例

"pagination">
  "current">"#">1
  "#">2
  "#">3
  "#">4
  "#">5

禁用分页

如果需要设置某个分页不可点击需要使用 .unavailable 类：

实例

"pagination">
  "#">1
  "#">2
  "unavailable">"#">3
  "#">4
  "#">5

分页方向

在第一个和最后一个

元素上添加.arrow 类插入 HTML 实体符号 « 和 » 来创建分页方向符号：

实例

"pagination">
  "arrow">"#">«
  "#">1
  "#">2
  "#">3
  "#">4
  "#">5
  "arrow">"#">»

分页居中显示

我们可以在

外层添加

元素，并在

上添加.pagination-centered 类来实现分页居中显示 :

实例

"pagination-centered">
  "pagination">
    "arrow">"#">«
    "current">"#">1
    "#">2
    "#">3
    "#">4
    "#">5
    "arrow">"#">»
  

面包屑导航

面包屑导航用于展示当前页面的导航结构。

在

元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:

实例

"breadcrumbs">
  "#">Home
  "#">Private
  "unavailable">"#">Pictures
  "current">Vacation

子导航

在页面切换上，子导航是非常有用的。

在

元素上添加 .sub-nav 类来创建子导航。在

元素上添加标题，为选中的选项添加 .active 类:

实例

"sub-nav">
  Filter:
  "active">"#">All
  "#">Active
  "#">Pending
  "#">Suspended

本文来源：www.lxlinux.net/12180.html，若引用不当，请联系修改。