Foundation 分页

如果某些内容太多,可能要用到分页

Foundation .pagination CSS class 用于将一个列表显示为 分页 样式

<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 CSS 类可以使某个列表项成为当前页

<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 CSS 类可以使分页中的某个列表项不可点击

<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>

运行范例 »

分页方向

可以在第一个和最后一个 <li> 元素上添加 .arrow 类和插入 HTML 实体符号 &laquo;&raquo; 来创建分页方向符号

<ul class="pagination">
    <li class="arrow"><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>

运行范例 »

分页居中显示

让分页在页面居中显示,需要在 <ul> 外层添加 <div&gt 元素,并在 <div> 上添加 .pagination-centered

<div class="pagination-centered">
    <ul class="pagination">
        <li class="arrow"><a href="#">&laquo;</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="#">&raquo;</a></li>
     </ul>
</div>

运行范例 »

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.