网站首页 > 基础教程正文

bootstrap基础快速入门-14 分页pagination组件

ccvgpt 2024-11-06 16:50:08 基础教程 42 ℃

大学生就可以看懂的bootstrap基础实战系列，pre标签里是笔记总结，动手实际操作一下会加强理解。有疑问留言交流哦。

bootstrap是进阶html5很基础常用的前端框架，可以做自适应漂亮的界面，再坚持一下，前端知识的大门就会打开了。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <link href="lib/node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
</head>
<style>
 .row {
 margin-bottom: 15px;
 border-bottom: #f8f8f8 1px solid;
 }
</style>
<body>
<pre>
.pager li > a,
.pager li > span {
 display: inline-block;
 padding: 5px 14px;
 background-color: #fff;
 border: 1px solid #ddd;
 border-radius: 15px;
}
 分页组件 pagination或者pager组件结构:ul li a/span,文字一定要放在a或者span标签里面.
 bootstrap工具类回顾: pull-left pull-right 设置背景色:bg-info bg-defult
</pre>
<div class="container">
 <div class="row">
 <div class="col-md-2 ">
 <label class="label label-success">分页</label> <label class="label label-default">pagination</label>
 </div>
 <div class="col-md-10 ">
 <ul class="pagination" id="pagi1">
 </ul>
 </div>
 </div>
 <div class="row">
 <div class="col-md-2 ">
 分页 pagination
 </div>
 <div class="col-md-10 ">
 <ul class="pagination pagination-sm" id="pagi2">
 </ul>
 </div>
 </div>
 <div class="row">
 <div class="col-md-2 bg-success">
 分页 pager 翻页效果
 </div>
 <div class="col-md-10 ">
 <ul class="pager" id="pagi3">
 <li class="previous"><a>上一页</a></li>
 <li class="next"><a>下一页 <span class="badge pull-right " style="">还有10页</span> </a></li>
 </ul>
 </div>
 </div>
</div>
</body>
<!--必须先引入jquery.js-->
<script src="jquery.js"></script>
<script src="lib/node_modules/bootstrap/dist/js/bootstrap.js"></script>
<script>
 var content = "";
 var showpage = 9;
 var lstr = " <li><a href=\"#\">?</a></li>";
 var rstr = " <li><a href=\"#\">?</a></li>";
 content = content + lstr;
 for (var i = 0; i < 20; i++) {
 if (i == 0) {
 content = content + "<li class='active'><a href='#'>" + i + "</a></li>";
 } else {
 content = content + "<li><a href='#'>" + i + "</a></li>";
 }
 }
 content = content + rstr;
 $("#pagi1").html(content);
 $("#pagi2").html(content);
 //jquery分页点击变色
 //通过.active选择到上一个active修饰的元素
 var removeClassA = $('#pagi1 li.active');
 $("#pagi1 li").bind('click', function () {
 //jquery bind函数里面this表示当前元素
 console.log("#pagi1 li a click..")
 removeClassA.removeClass('active');
 $(this).addClass("active");
 removeClassA = $(this);
 });
 //jquery分页点击变色
 //通过.active选择到上一个active修饰的元素
 var removeClassA = $('#pagi2 li.active');
 $("#pagi2 li").bind('click', function () {
 //jquery bind函数里面this表示当前元素
 console.log("#pagi2 li a click..")
 removeClassA.removeClass('active');
 $(this).addClass("active");
 removeClassA = $(this);
 });
</script>
</html>

上一篇：网站前端横幅滑动选项效果网页出现横向滚动条
下一篇： Jquery实现文本框得到焦点的时候，文本框的焦点出现在最后!

网站首页 > 基础教程 正文

bootstrap基础快速入门-14 分页pagination组件

猜你喜欢

网站首页 > 基础教程正文