Bootstrap分页样式

2023-06-22 18:34•php•阅读 1623

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 分页的大小</title>
//需引用bootstrap 3.3.7的bootstrap.min.css

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">  
//jquery/2.1.1/jquery.min.js

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
//bootstrap/3.3.7/js/bootstrap.min.js

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<ul class="pagination pagination-lg">

    <li><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><a href="#">&raquo;</a></li>

</ul><br>

<ul class="pagination">

    <li><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><a href="#">&raquo;</a></li>

</ul><br>

<ul class="pagination pagination-sm">

    <li><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><a href="#">&raquo;</a></li>

</ul>

</body>

</html>
运行结果：1：大  2：正常  3：小

Bootstrap分页样式

第二种样式：

<li><a href="#">Previous</a></li>

</ul>

Bootstrap分页样式

第三种样式：

<li class="previous"><a href="#">← Older</a></li>

<li class="next"><a href="#">Newer →</a></li>

</ul>

Bootstrap分页样式

以上内容纯属借鉴