Foundation 分页 - 学习 Foundation 5 - 简单教程，简单编程

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

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 实体符号 « 和 » 来创建分页方向符号

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

运行范例 »