Bootstrap分页样式

最新推荐文章于 2023-04-11 09:51:10 发布

R芮R

最新推荐文章于 2023-04-11 09:51:10 发布

阅读量620

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/fuyao/p/7644322.html

版权

<!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：小

第二种样式：

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

第三种样式：

<ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul>

以上内容纯属借鉴

转载于:https://www.cnblogs.com/fuyao/p/7644322.html

关注