Foundation 分页简介

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

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

• 元素上加上 .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
  

  以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”，或扫描下方二维码进行关注，更多干货等着你 ！