Bootstrap学习总结笔记（12）-- 基本组件之分页

最新推荐文章于 2022-07-10 18:28:12 发布

kikay

最新推荐文章于 2022-07-10 18:28:12 发布

阅读量644

点赞数

分类专栏： Bootstrap 文章标签： bootstrap 分页

本文链接：https://blog.csdn.net/kikaylee/article/details/53507022

版权

Bootstrap 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

Bootstrap提供了对分页的良好支持。

0x01 默认的分页

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>默认的分页</title>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>默认的分页</h1>
    </div>
    <div>
        <ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</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="#">&raquo;</a></li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下：

上面增加了disabled和active的效果。

0x02 综合案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>分页</title>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>分页</h1>
    </div>
    <div>
        <ul class="pagination">
            <li class="disabled"><a href="#">&laquo;</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="#">&raquo;</a></li>
            <li>&nbsp;</li>
            <li>
                <label for="text">跳转到:</label><input type="text" class="text-info" id="text" size="10">
            </li>
            <li>
                <button class="btn btn-primary">Go</button>
            </li>
        </ul>
    </div>
</div>
</body>
</html>

效果如下：

0x03 翻页

下面的例子演示.pager的样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <title>翻页</title>
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1>翻页</h1>
    </div>
    <div>
        <ul class="pager">
            <li class="previous"><a href="#">前一页</a></li>
            <li class="next"><a href="#">后一页</a></li>
        </ul>
    </div>
</div>
</body>
</html>