Bootstrap 2 分页

Bootstrap 内置了分页模块,本节我们将会学习如何使用 Bootstrap 创建分页效果

先来看一下最终效果

Bootstrap 2 breadcrumbs demo

分页效果

Bootstrap .pagination CSS 用来将一个列表显示为分页的效果

Bootstrap .disabled.active 用于定制分页中的链接是可点击的还是不可点击的

Bootstrap .pagination-centered.pagination-right 用户设置分页的对齐方式(居中或靠右,默认是靠左)

<div class="pagination">
    <ul>
        <li><a href="#">Prev</a></li>
        <li class="active"><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="#">Next</a></li>
    </ul>
</div>

运行范例 »

翻页

Boostrap 2 也可以创建只有 "上一页/下一页" 这种简单的分页效果

Bootstrap 2 breadcrumbs demo

Bootstrap 2 .pager CSS 类用于创建 "上一页/下一页" 分页效果

Bootstrap 2 .disabled CSS 类可以让链接不可点击

<ul class="pager">
    <li><a href="#">上一页</a></li>
    <li><a href="#">下一页</a></li>
</ul>

运行范例 »

带有 新的旧的 的翻页效果

Bootstrap 2 breadcrumbs demo

Bootstrap .previous.next CSS 类可以用来创建上面这种 "新的/旧的" 的分页效果

<ul class="pager">
    <li class="previous"><a href="#">← 旧的</a></li>
    <li class="next"><a href="#">新的 →</a></li>
</ul>

运行范例 »

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

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

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