《前端》慕课--分页导航（带页码的分页导航）

分页导航（带页码的分页导航），玩转Bootstrap（基础）教程-慕课网 https://www.imooc.com/code/3185

在Bootstrap框架中使用的是ul>li>a这样的结构，在ul标签上加入pagination方法：

<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>

大小设置：

在Bootstrap框架中，也可以通过几个不同的情况来设置其大小。类似于按钮一样：

1、通过“pagination-lg”让分页导航变大；

2、通过“pagination-sm”让分页导航变小：

<ul class="pagination pagination-lg">…
</ul>
<ul class="pagination">…
</ul>
<ul class="pagination pagination-sm">…
</ul>

实例：
Html文件：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>分页导航</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<!--代码-->
<ul class="pagination pagination-lg"><li><a href="#">&laquo;第一页</a></li><li><a href="#">11</a></li><li><a href="#">12</a></li><li class="active"><a href="#">13</a></li><li><a href="#">14</a></li><li><a href="#">15</a></li><li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>
<ul class="pagination pagination"><li><a href="#">&laquo;第一页</a></li><li><a href="#">11</a></li><li><a href="#">12</a></li><li class="active"><a href="#">13</a></li><li><a href="#">14</a></li><li><a href="#">15</a></li><li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>
<ul class="pagination pagination-sm"><li><a href="#">&laquo;第一页</a></li><li><a href="#">11</a></li><li><a href="#">12</a></li><li class="active"><a href="#">13</a></li><li><a href="#">14</a></li><li><a href="#">15</a></li><li class="disabled"><a href="#">最后一页&raquo;</a></li>
</ul>
<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>
</html>
Bootstrap.css:
<style>
.pagination-lg> li > a,
.pagination-lg> li > span {
padding: 10px 16px;
font-size: 18px;
}
.pagination-lg>li:first-child> a,
.pagination-lg>li:first-child> span {
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.pagination-lg>li:last-child> a,
.pagination-lg>li:last-child> span {
border-top-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.pagination-sm> li > a,
.pagination-sm> li > span {
padding: 5px 10px;
font-size: 12px;
}
.pagination-sm>li:first-child> a,
.pagination-sm>li:first-child> span {
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}
.pagination-sm>li:last-child> a,
.pagination-sm>li:last-child> span {
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
</style>

《前端》慕课--分页导航（带页码的分页导航）相关推荐

java多页码分页_对页码进行分页
/*** 分页页码 *@paramtotalcount 记录总数 *@paramnum 每页记录数 *@paramindex 当前页码 *@paramparamstr 参数串&隔开,如:a=1 ...
基于bootstrap的前端分页。带省略号和上下页。
bootstrap前端分页自带效果. 没办法,要是你看了之前的博客你该知道我为什么,要自己写... 诶,好了,不唠叨了 . 首先是百度下获得资源 http://blog.csdn.net/u0130 ...
基于Spring boot的教学论坛系统的分页功能的实现，完善导航栏，搜索功能的实现，评论有关功能
一.实现分页功能:利用bootstrap的分页组件 IndexController.java 定义两个参数分别负责 page-页码数 size-分页数 @Controller public class ...
mysql大数据量使用limit分页，随着页码的增大，查询效率越低下。
转载地址:http://www.cnblogs.com/lpfuture/p/5772055.html 测试实验 1. 直接用limit start, count分页语句, 也是我程序中用的方法: ...
CI 漂亮的分页样式（页码样式）
还在为难看的分页发愁吗,下面教你如何用CI编写漂亮的分页 demo:(本人用bootstrap分页样式,你可以根据个人喜好定义自己的class): 一.决定样式的配置: 1. $config['num ...
java 页码计算_分页之页面页码列表计算
分页之页面页码列表计算我们通过看百度的分页可以发现以下规律: 1.最多显示10个页码: 2.当前页在页码中的位置定为六: 所以只需要当前页码来定出来页码列表,定下来页码列表只需要两个数据:begin ...
spring boot自带的page分页
#jpa自带的page类()springboot自带帮助我们分页 public Page<Comment> findByDetailid(Long id,Pageable pageabl ...
一次DB2分页语句的优化，带你拨开分页SQL优化的外衣
一次DB2分页语句的优化,带你拨开分页SQL优化的外衣 1 前言: 最近,项目中的一个 DB2分页查询很慢 ,组长将此分页的优化分派给了我:然后一顿优化(乱操作)后,将DB2分页查询耗时降到了比较满意 ...
element ui分页怎么做_elementUI实现分页
分页的两种方式.前端分页,后端分页.两种方式各有个的优缺点吧. 前端分页:后台只需将数据返回,不需要做过多处理,前端一次请求拿到所有数据后做分页处理.但数据量不能太大,因为前端是先一次性加载所有数据, ...

《前端》慕课--分页导航（带页码的分页导航）

《前端》慕课--分页导航（带页码的分页导航）相关推荐

最新文章

热门文章