Bootstrap 分页

将讲解 Bootstrap 支持的分页特性。分页(Pagination),是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。

Bootstrap 分页

分页(Pagination)

下表列出了 Bootstrap 提供的处理分页的 class。

Class描述示例代码
.pagination添加该 class 来在页面上显示分页。
<ul class="pagination">
.disabled, .active您可以自定义链接,通过使用 .disabled 来定义不可点击的链接,通过使用 .active 来指示当前的页面。
<ul class="pagination">
.pagination-lg, .pagination-sm使用这些 class 来获取不同大小的项。
<ul class="pagination pagination-lg">...</ul><ul class="pagination">...</ul><ul class="pagination pagination-sm">...</ul>

默认的分页

下面的实例演示了上表中所讨论的 class .pagination 的用法:

实例

<ulclass="pagination"><li><ahref="#">«</a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#">»</a></li></ul>

Bootstrap 分页

结果如下所示:

Bootstrap 分页

分页的状态

下面的实例演示了上表中所讨论的 class .disabled、.active 的用法:

实例

<ulclass="pagination"><li><ahref="#">«</a></li><liclass="active"><ahref="#">1</a></li><liclass="disabled"><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#">»</a></li></ul>

尝试一下 »

结果如下所示:

Bootstrap 分页

分页的大小

下面的实例演示了上表中所讨论的 class .pagination-* 的用法:

实例

<ulclass="pagination pagination-lg"><li><ahref="#">«</a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#">»</a></li></ul><br><ulclass="pagination"><li><ahref="#">«</a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#">»</a></li></ul><br><ulclass="pagination pagination-sm"><li><ahref="#">«</a></li><li><ahref="#">1</a></li><li><ahref="#">2</a></li><li><ahref="#">3</a></li><li><ahref="#">4</a></li><li><ahref="#">5</a></li><li><ahref="#">»</a></li></ul>

Bootstrap 分页

结果如下所示:

Bootstrap 分页

翻页(Pager)

如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。

Class描述示例代码
.pager添加该 class 来获得翻页链接。
<ul class="pager">
.previous, .next使用 class .previous 把链接向左对齐,使用.next 把链接向右对齐。
<ul class="pager">
.disabled添加该 class 来获得一个颜色变淡的外观。
<ul class="pager">

默认的翻页

下面的实例演示了上表中所讨论的 class .pager 的用法:

实例

<ulclass="pager"><li><ahref="#">Previous</a></li><li><ahref="#">Next</a></li></ul>

尝试一下 »

结果如下所示:

Bootstrap 分页

对齐的链接

下面的实例演示了上表中所讨论的 class .previous、.next 的用法:

实例

<ulclass="pager"><liclass="previous"><ahref="#">← Older</a></li><liclass="next"><ahref="#">Newer →</a></li></ul>

尝试一下 »

结果如下所示:

Bootstrap 分页

翻页的状态

下面的实例演示了上表中所讨论的 class .disabled 的用法:

实例

<ulclass="pager"><liclass="previous disabled"><ahref="#">← Older</a></li><liclass="next"><ahref="#">Newer →</a></li></ul>

尝试一下 »

结果如下所示:

Bootstrap 分页


分页更多实例

描述实例
.pager一个简单的分页链接,链接居中对齐。尝试一下
.previous.pager 中上一页的按钮样式,左对齐尝试一下
.next.pager 中下一页的按钮样式,右对齐尝试一下
.disabled禁用链接尝试一下
.pagination分页链接尝试一下
.pagination-lg更大尺寸的分页链接尝试一下
.pagination-sm更小尺寸的分页链接尝试一下
.disabled禁用链接尝试一下
.active当前访问页面链接样式

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!

相关推荐