2016年6月1日下午(传智Bootstrap笔记(Bootstrap分页))
2016-06-01 15:31
405 查看
Bootstrap 分页
本章将讲解 Bootstrap 支持的分页特性。分页(Pagination)是一种无序列表,Bootstrap 像处理其他界面元素一样处理分页。1、分页(Pagination)
下表列出了 Bootstrap 提供的处理分页的 class。Class | 描述 | 示例代码 |
---|---|---|
.pagination | 添加该 class 来在页面上显示分页。 | <ul class="pagination"> <li><a href="#">«</a></li> <li><a href="#">1</a></li> ....... </ul> |
.disabled, .active | 您可以自定义链接,通过使用 .disabled 来定义不可点击的链接,通过使用 .active 来指示当前的页面。 | <ul class="pagination"> <li class="disabled"><a href="#">«</a></li> <li class="active"><a href="#">1<span class="sr-only">(current)</span></a></li> ....... </ul> |
.pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 | <ul class="pagination pagination-lg">...</ul> <ul class="pagination">...</ul> <ul class="pagination pagination-sm">...</ul> |
2、默认的分页
<ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/23/dec2bb62be29e5467fd3c745a9c5f0b2.png)
3、分页的状态
<ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><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="#">»</a></li> </ul>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/23/f8ce7152454f070a048ed5a0a1c5ab42.png)
4、分页的大小
<ul class="pagination pagination-lg"> <li><a href="#">«</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="#">»</a></li> </ul><br> <ul class="pagination"> <li><a href="#">«</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="#">»</a></li> </ul><br> <ul class="pagination pagination-sm"> <li><a href="#">«</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="#">»</a></li> </ul>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/23/8a0b1939a5ed1c420a3625b3ae8bd48f.png)
翻页(Pager)
如果您想要创建一个简单的分页链接为用户提供导航,可通过翻页来实现。与分页链接一样,翻页也是无序列表。默认情况下,链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。Class | 描述 | 示例代码 |
---|---|---|
.pager | 添加该 class 来获得翻页链接。 | <ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul> |
.previous, .next | 使用 class .previous 把链接向左对齐,使用 .next把链接向右对齐。 | <ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
.disabled | 添加该 class 来获得一个颜色变淡的外观。 | <ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul> |
<ul class="pager"> <li><a href="#">Previous</a></li> <li><a href="#">Next</a></li> </ul>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/23/e92bcc37bd8751c1f58fe7261b65f023.png)
2、对齐的链接
<ul class="pager"> <li class="previous"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/23/a60f8598ede9d3764a40ffaa3272b6bf.png)
3、翻页的状态
<ul class="pager"> <li class="previous disabled"><a href="#">← Older</a></li> <li class="next"><a href="#">Newer →</a></li> </ul>
![](https://oscdn.geek-share.com/Uploads/Images/Content/202003/23/7711ec96a5ec2672cdf6135f33fda154.png)
相关文章推荐
- Bootstrap3.0建站教程(一)之bootstrap表单元素排版
- 2016年6月1日下午(传智Bootstrap笔记(Bootstrap 导航栏元素))
- Bootstrap 折叠(Collapse)插件用法实例详解
- Bootstrap 附加导航(Affix)插件实例详解
- Twitter bootstrap模糊查询插件 ajax获取内容
- Yaf之配置和Bootstrap
- Bootstrap 排版
- Boostrap-table.js的表格数据可视化 集成bootstrap-editable.js
- Java JavaEE框架Bootstrap、HTML5、jQuery、SpringMVC
- Bootstrap Datatable 简单的基本配置
- bootstrap-table的入门使用——从服务器获取数据
- bootstrap常用类名
- bootstrap学习总结-css样式设计(一)
- bootstrap使用问题记录1
- Bootstrap学习指南
- bootStrap实习原理
- 热衷bootstrap的人开始醒醒吧!bootstrap与jquery mobile一些体会
- Bootstrap表单验证插件bootstrapValidator使用方法整理
- <<Bootstrap基础教程>> 新书出手,有心栽花花不开,无心插柳柳成荫
- 利用js和css实现Bootstrap下拉列表数据过滤