Bootstrap组件之分页
2015-08-01 17:50
701 查看
.pagination——指定ul元素包裹分页组件;
.pagination-lg、.pagination-sm——改变分页组件的尺寸大小,适配不同屏幕的分辨率;
.disabled——指定分页组件的列表项为禁用状态;
.active——指定分页组件的列表项为激活状态;
.pager——指定ul元素包裹翻页组件;
.previous、.next——分别设置翻页组件的列表项元素的链接向两端对齐;
.pagination-lg、.pagination-sm——改变分页组件的尺寸大小,适配不同屏幕的分辨率;
.disabled——指定分页组件的列表项为禁用状态;
.active——指定分页组件的列表项为激活状态;
.pager——指定ul元素包裹翻页组件;
.previous、.next——分别设置翻页组件的列表项元素的链接向两端对齐;
<!DOCTYPE html> <html lang="zh_CN"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>饭盒儿——发现身边不一样的世界</title> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"> <script src="js/jquery-2.1.3.min.js"></script> <script src="js/bootstrap.min.js"></script> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div class="container"> <h3> 分页组件 </h3> <nav> <ul class="pagination pagination-lg"> <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> <nav> <ul class="pagination"> <li class="disabled"> <a href="#" aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li class="active"><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> <nav> <ul class="pagination pagination-sm"> <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> <nav> <ul class="pager"> <li><a href="#">上一页</a></li> <li><a href="#">下一页</a></li> </ul> </nav> <nav> <ul class="pager"> <li class="previous"><a href="#"><span aria-hidden="true">←</span> 向前</a></li> <li class="next"><a href="#">向后 <span aria-hidden="true">→</span> </a></li> </ul> </nav> </div> </body> </html>
相关文章推荐
- Bootstrap组件之well、标签
- Bootstrap组件之具有响应式特性的嵌入内容
- Bootstrap (导航、标签、面包屑导航)
- Bootstrap组件之面板
- Bootstrap组件之媒体对象
- BootStrap表单
- BootStrap表格
- Bootstrap 固定定位(Affix)
- Bootstrap carousel轮转图的使用
- Bootstrap组件之导航条
- 基于bootstrap3和jquery的分页插件
- bootstrap布局详解
- 让IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解决方法
- 让Bootstrap 3兼容IE8浏览器
- Bootstrap组件之导航
- 基于bootstrap3和jquery的分页插件
- Bootstrap_遮罩提示
- Bootstrap 3支持IE 8遇到的一个小问题
- bootstrap 显示下拉框
- Bootstrap 入门(1)