Foundation 分页

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

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

元素上加上 .pagination 类:
实例

 
• 1

 
• 2

 
• 3

 
• 4

 
• 5



当前页面

可以在

• 加上 .current 类来标注当前页面：
  实例
  
   
  • 1
  
   
  • 2
  
   
  • 3
  
   
  • 4
  
   
  • 5
  
  
  
  禁用分页

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

  实例
  
   
  • 1
  
   
  • 2
  
   
  • 3
  
   
  • 4
  
   
  • 5
  
  
  
  分页方向

  在第一个和最后一个

• 元素上添加.arrow 类插入 HTML 实体符号 « 和 » 来创建分页方向符号：
  实例
  
   
  • «
  
   
  • 1
  
   
  • 2
  
   
  • 3
  
   
  • 4
  
   
  • 5
  
   
  • »
  
  
  分页居中显示

  我们可以在

  外层添加
  元素，并在
  上添加.pagination-centered 类来实现分页居中显示 :
  实例
  
   
  
     
  • «
  
     
  • 1
  
     
  • 2
  
     
  • 3
  
     
  • 4
  
     
  • 5
  
     
  • »
  
  
  
  
  
  面包屑导航
  面包屑导航用于展示当前页面的导航结构。
  在
  元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在
  • 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:
    实例
    
     
    • Home
    
     
    • Private
    
     
    • Pictures
    
     
    • Vacation
    
    
    
    子导航

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

    在

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

    元素上添加标题，为选中的选项

    添加 .active 类:

    实例

    
     

    Filter:

    
     

    All

    
     

    Active

    
     

    Pending

    
     

    Suspended

    
    

    
    

    
    

    
    
  1024 个赞
  编辑 举报
  需要 登录 后方可回复, 如果你还没有账号请 注册新账号