创新互联Foundation教程：Foundation分页
Foundation 分页
如果你的网页有很多内容，就需要使用分页功能。
成都创新互联公司主营荣县网站建设的网络公司,主营网站建设方案,app开发定制,荣县h5小程序开发搭建,荣县网站营销推广欢迎荣县等地区企业咨询
要创建一个基础的分页功能需要在 .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
>
尝试一下 »
当前页面
可以在 加上 .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
>
尝试一下 »
分页方向
在第一个和最后一个 元素上添加.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
> 尝试一下 »
分页居中显示
我们可以在
- 外层添加
- 上添加
.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
>
尝试一下 »
子导航
在页面切换上，子导航是非常有用的。
在
.sub-nav类来创建子导航。在元素上添加标题，为选中的选项添加.active类:实例
<
dl
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
>
<
/dl
>
尝试一下 »
本文标题：创新互联Foundation教程：Foundation分页
URL标题：https://www.tepqt.com/article/coseddi.html
元素，并在 上添加.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
>
尝试一下 »
面包屑导航
面包屑导航用于展示当前页面的导航结构。
在
.breadcrumbs 类来实现面包屑导航。你可以在