Bootstrap—分页Pagination和翻页Pager

最新推荐文章于 2024-10-08 09:00:00 发布

Tiramisu_C

最新推荐文章于 2024-10-08 09:00:00 发布

阅读量4.6k

点赞数 3

分类专栏： Bootstrap Bootstrap学习之路文章标签： Bootstrap 分页翻页 Pagination Pager

本文链接：https://blog.youkuaiyun.com/nongweiyilady/article/details/53677741

版权

Bootstrap 同时被 2 个专栏收录

17 篇文章

订阅专栏

Bootstrap学习之路

17 篇文章

订阅专栏

看新闻或者长内容文章的时候常常看到分页按钮，今天来学一下Bootstrap中的分页和翻页。

分页

使用一个带有class="pagination"的无序列表即可实现分列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分页和翻页</title>
    <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <ul class="pagination">
            <li ><a href="#">«</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="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><a href="#">»</a></li>
        </ul>
    </div>
</body>
</html>

还可以加入以下样式来控制分页的效果：

.active：在li上加入.active表示当前页面，效果如上图的1所示。

.disabled,：表示进入，在li上加入，不可点。

.pagination-lg, .pagination-sm：控制分页的大小，使用方法：

 <ul class="pagination pagination-lg">

翻页

翻页使用的是一个带有.pager的无序列表实现：

<ul class="pager">
            <li><a href="#">Previous</a></li>
            <li><a href="#">Next</a></li>
 </ul>

加入以下样式来控制翻页的效果

.previous、.next：加在li上，让翻页按钮向左或者向右对齐：

 <ul class="pager">
            <li class="previous"><a href="#">Previous</a></li>
            <li class="next"><a href="#">Next</a></li>
        </ul>

效果：