良许Linux教程网 干货合集 Foundation 分页简介

Foundation 分页简介

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

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

    • 元素上加上 .pagination 类:

实例

当前页面

可以在

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

    实例

    禁用分页

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

    实例

    分页方向

    在第一个和最后一个

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

    实例

    分页居中显示

    我们可以在

      外层添加

    元素,并在

    上添加.pagination-centered 类来实现分页居中显示 :

    实例

    "pagination-centered">   

    面包屑导航

    面包屑导航用于展示当前页面的导航结构。

      元素上添加 .breadcrumbs 类来实现面包屑导航。你可以在
  • 上添加 .current 或 .unavailable 类设置当前页与不可点击效果:

    实例

    子导航

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

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

    元素上添加标题,为选中的选项添加 .active 类:

    实例

    "sub-nav">   
    Filter:
      
    "active">"#">All
      
    "#">Active
      
    "#">Pending
      
    "#">Suspended

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

    137e00002230ad9f26e78-265x300

 

本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程
关注公众号
【良许Linux】
回复1024
获取 
99G Linux
从菜鸡到大神
VIP资源课程