-
- 咋的 2020-09-20
分页：常用于图片、文字等的分页情况。
属性
属性详情
pagination
父元素中添加表示分页
pager
放置在翻页区域，与pagination相对
previous
把链接向左对齐
next
把链接向右对齐
- 0赞 · 0采集
-
- 慕桂英3185026 2020-06-16
麻烦问下 这个写div的工具叫什么名字？
- 0赞 · 0采集
-
- 慕粉2466386 2019-08-15
分页：常用于图片、文字等的分页情况。
属性
属性详情
pagination
父元素中添加表示分页
pager
放置在翻页区域，与pagination相对
previous
把链接向左对齐
next
把链接向右对齐
page-header
分页底部线 *同样也可以使用-lg/sm显示按钮的大小。
案例截图：
案例代码：
<!--正常分页样式-->
<ul class="pagination">
<li class="active"><a href="">首页</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">尾页</a></li>
</ul>
<!--正常分页样式 end-->
<!--翻页样式-->
<div class="page-header" style="width:30%;margin:0 auto;">
<ul class="pager">
<li class="previous"><a href="">上一页</a></li>
<li class="next"><a href="">下一页</a></li>
</ul>
</div>
<!--翻页样式 end-->
- 1赞 · 0采集
-
- 为了自己加油 2019-04-10
分页
,pagination 在父元素中添加表示分页
.pager 放置在翻页区域
.previous 把链接向左对齐， .next 把链接向右对齐
- 0赞 · 0采集
-
- PQ123456 2019-03-09
- <nav> <ul class="pager"> <li class="p"><a href="javascript:;">上一页</a></li> <li class="next"><a href="javascript:;">下一页</a></li> </ul> <ul class="pagnation pagnation-lg"> <li class="active"><a href="javascript:;">1</a></li> <li><a href="javascript:;">2</a></li> <li><a href="javascript:;">3</a></li> <li><a href="javascript:;">4</a></li> <li><a href="javascript:;">5</a></li> </ul> <nav>
-
截图0赞 · 0采集
-
- 斌哥在此 2018-09-05
Bootstrap4.0写法 <nav> <ul class="pagination justify-content-center"> <li class="page-item "> <a class="page-link" href="#"> 向左 </a> </li> <li class="page-item "> <a class="page-link" href="#"> 向右 </a> </li> </ul> <ul class="pagination"> <li class="page-item active"> <a href="#" class="page-link" >1</a> </li> <li class="page-item"> <a href="#" class="page-link">2</a> </li> <li class="page-item"> <a href="#" class="page-link">3</a> </li> <li class="page-item"> <a href="#" class="page-link">4</a> </li> <li class="page-item"> <a href="#" class="page-link">5</a> </li> </ul> </nav> 4.0之后使用justify-content来调节位置
- 1赞 · 1采集
-
- 慕粉2026319708 2018-08-06
分页：
1、.pagination在父元素中添加表示分页
2、.pager放置在翻页区域
3、.previous把链接向左对其，.next把链接向右对齐
- 1赞 · 1采集
-
- 慕仰0566622 2018-07-07
Bootstrap组件-分页
-
截图0赞 · 0采集
-
- 慕少安 2018-07-04
分页：
1、.pagination在父元素中添加表示分页
2、.pager放置在翻页区域
3、.previous把链接向左对其，.next把链接向右对齐
- 0赞 · 0采集
-
- 小重山山232673 2018-05-14
<nav>
<ul class="pager">
<li class="previous"><a href="#">前一个</a><li>
<li class="next"><a href="#">后一个</a><li>
</ul>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</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="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
- 0赞 · 0采集
-
- 隔壁老王的弟子 2018-05-08
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Mooc网学习</title> <link href="css/bootstrap-theme.min.css"rel="stylesheet"> <link href="css/bootstrap.min.css"rel="stylesheet"> </head> <body> <nav> <ul class="pager"> <li class="next"><a href="http://www.baidu.com">向左</a> </li> <li class="previous"><a href="http://www.baidu.com">向右</a> </li> </ul> <ul class="pagination pagination-lg"> <li class="active"><a href="http://www.baidu.com">1</a> </li> <li><a href="http://www.baidu.com">2</a> </li> <li><a href="http://www.baidu.com">3</a> </li> <li><a href="http://www.baidu.com">4</a> </li> <li><a href="http://www.baidu.com">5</a> </li> </ul> </nav> <script src="js/jquery-3.1.1.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>
- 0赞 · 0采集
-
- 宝慕林6292338 2018-04-25
分页
-
截图0赞 · 0采集
-
- 深山老龟 2018-04-18
向左向右
-
截图0赞 · 0采集
-
- 深山老龟 2018-04-18
2
-
截图0赞 · 0采集
-
- 深山老龟 2018-04-18
分页
-
截图0赞 · 0采集
-
- 刘家小妹子 2018-04-03
分页效果：
1. .pagination在父元素中添加表示分页 2. .pager放置在翻页区域 3. .previous把链接向左对齐， .next把链接向右对齐。 </head> <body> <nav> <ul class="pager"> <li class="previous"><a href="http://www.imooc.com/">向左</a></li> <li class="next"><a href="http://www.imooc.com/">向右</a></li> </ul> <ul class="pagination pagination-lg"> <li class="active"><a href="http://www.imooc.com/">1</a></li> <li><a href="http://www.imooc.com/">2</a></li> <li><a href="http://www.imooc.com/">3</a></li> <li><a href="http://www.imooc.com/">4</a></li> <li><a href="http://www.imooc.com/">5</a></li> </ul> </nav> <!-- pagination-lg 变大 pagination-sm 变小 --> </body>
- 2赞 · 3采集
-
- sTone_StarDust 2018-01-28
- 给分页增加“向左”“向右”的方向标签
-
截图0赞 · 0采集
-
- sTone_StarDust 2018-01-28
- 分页的实现
-
截图0赞 · 0采集
-
- cat糯米团 2017-11-17
- 分页 .pagination .pagination-lg 分页变大 .pagination-sm 分页变小 .pager .previous .next
- 0赞 · 0采集
-
- 慕侠2661030 2017-09-29
- 分页。。
-
截图0赞 · 0采集
-
- Chrimisia 2017-07-22
- 组件_分页
-
截图0赞 · 0采集
-
- Youwillbethere 2017-07-18
- Bootstrap组件——分页 .pagination .pager .previous .next
-
截图0赞 · 0采集
-
- 慕粉菜鸟2020 2017-06-18
- 讲的好简单
- 1赞 · 0采集
-
- qq_隐俸冰洛曦_03722678 2017-06-14
- 1. .pagination在父元素中添加表示分页 2. .pager放置在翻页区域 3. .previous把链接向左对其， .next把链接向右对其。 </head> <body> <nav> <ul class="pager"> <li class="previous"><a href="http://www.imooc.com/">向左</a></li> <li class="next"><a href="http://www.imooc.com/">向右</a></li> </ul> <ul class="pagination pagination-lg"> <li class="active"><a href="http://www.imooc.com/">1</a></li> <li><a href="http://www.imooc.com/">2</a></li> <li><a href="http://www.imooc.com/">3</a></li> <li><a href="http://www.imooc.com/">4</a></li> <li><a href="http://www.imooc.com/">5</a></li> </ul> </nav> <!-- pagination-lg 变大 pagination-sm 变小 --> </body>
- 1赞 · 4采集
-
- 飛菲 2017-06-10
- 分页-补充
- 0赞 · 0采集
-
- qq_击石原有火_03828381 2017-06-04
- previous 靠左 next 靠右
-
截图0赞 · 0采集
-
- 子不语怪力乱神 2017-05-30
- 123
-
截图0赞 · 0采集
-
- 疯狂的小白 2017-05-19
- bootstrap分页
-
截图0赞 · 0采集
-
- 慕粉Wo 2017-05-19
- 分页--
-
截图0赞 · 0采集
-
- 慕粉Wo 2017-05-19
- -分页
-
截图0赞 · 0采集
