Foundation 分页

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

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

元素上加上.pagination类:

实例

          
  
分页
 
.pagination 类提供了分页链接：
 
 
1
 
2
 
3
 
4
 
5
 
  


运行实例 »

点击 "运行实例" 按钮查看在线实例

---

当前页面

可以在

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

  实例

            
    
  分页 - 当前页
   
  当前页面需要添加 .current 类:
   
   
  1
   
  2
   
  3
   
  4
   
  5
   
    

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ---

  禁用分页

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

  实例

            
    
  分页 - 不可用状态
   
  如果要设置当前分页不可用可以使用 .unavailable 类:
   
   
  1
   
  2
   
  3
   
  4
   
  5
   
    

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ---

  分页方向

  在第一个和最后一个 code>

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

  实例

            
    
  分页方向符号
   
  使用 .arrow 类来创建方向符号：
   
   
  «
   
  1
   
  2
   
  3
   
  4
   
  5
   
  »
   
    

  
  运行实例 »

  点击 "运行实例" 按钮查看在线实例

  ---

  分页居中显示

  我们可以在

  外层添加
  元素，并在
  上添加.pagination-centered类来实现分页居中显示 :
  实例
            
    
  分页居中
   
  分页居中可以 在 ul 外层添加 div 并使用 pagination-centered 类 :
   
   
   
  «
   
  1
   
  2
   
  3
   
  4
   
  5
   
  »
   
   
    
  
  运行实例 »
  点击 "运行实例" 按钮查看在线实例
  ---
  面包屑导航
  面包屑导航用于展示当前页面的导航结构。
  在
  元素上添加.breadcrumbs类来实现面包屑导航。你可以在
  • 上添加.current或.unavailable类设置当前页与不可点击效果:

    实例

              
      
    面包屑导航
     
    .breadcrumb 类用于展示面包屑导航:
     
     
    Home
     
    Private
     
    Pictures
     
    Vacation
     
      

    
    运行实例 »

    点击 "运行实例" 按钮查看在线实例

    ---

    子导航

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

    在

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

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

    添加.active类:

    实例

              
      
    子导航
     
     
    Filter:
     
    All
     
    Active
     
    Pending
     
    Suspended
     
      

    
    运行实例 »

    点击 "运行实例" 按钮查看在线实例
  ← Foundation 选项卡
  Foundation 价格表→