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
  > 尝试一下 »

  ---

  分页居中显示

  我们可以在

  外层添加
  元素，并在
  上添加.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 类来实现面包屑导航。你可以在
  • 上添加 .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分享：http://csdahua.cn/article/coseddi.html
  
  扫二维码与项目经理沟通
  我们在微信上24小时期待你的声音
  解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
  其他资讯
  • 动态IP家用电脑做服务器，如何设置动态域名解析？(域名动态解析实现)
  • 云主机contos配置http的方法是什么
  • 建立自己的Oracle数据库OracleBase简明指南
  • JS小知识，分享一些让我迷惑的前端面试题
  • Apache模块方式运行SVN版本控制详解