Bootstrap <基础十九>分页
Bootstrap 支持的分页特性。分页（Pagination），是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。
分页（Pagination）
下表列出了 Bootstrap 提供的处理分页的 class。
| Class | 描述 | 示例代码 |
|---|---|---|
| .pagination | 添加该 class 来在页面上显示分页。 |
<ul class="pagination"> |
| .disabled, .active | 您可以自定义链接，通过使用 .disabled 来定义不可点击的链接，通过使用 .active 来指示当前的页面。 |
<ul class="pagination"> |
| .pagination-lg, .pagination-sm | 使用这些 class 来获取不同大小的项。 |
<ul class="pagination pagination-lg">...</ul> |
默认的分页
下面的实例演示了上表中所讨论的 class .pagination 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的分页</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <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> </body>
</html>
结果如下所示：
分页的状态
下面的实例演示了上表中所讨论的 class .disabled、.active 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 分页的状态</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <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> </body>
</html>
结果如下所示：
分页的大小
下面的实例演示了上表中所讨论的 class .pagination-* 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 分页的大小</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <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> </body>
</html>
结果如下所示：
翻页（Pager）
如果您想要创建一个简单的分页链接为用户提供导航，可通过翻页来实现。与分页链接一样，翻页也是无序列表。默认情况下，链接是居中显示。下表列出了 Bootstrap 处理翻页的 class。
| Class | 描述 | 示例代码 |
|---|---|---|
| .pager | 添加该 class 来获得翻页链接。 |
<ul class="pager"> |
| .previous, .next | 使用 class .previous 把链接向左对齐，使用 .next把链接向右对齐。 |
<ul class="pager"> |
| .disabled | 添加该 class 来获得一个颜色变淡的外观。 |
<ul class="pager"> |
默认的翻页
下面的实例演示了上表中所讨论的 class .pager 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 默认的翻页</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul> </body>
</html>
结果如下所示：
对齐的链接
下面的实例演示了上表中所讨论的 class .previous、.next 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 翻页中对齐的链接</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <ul class="pager">
<li class="previous"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul> </body>
</html>
结果如下所示：
翻页的状态
下面的实例演示了上表中所讨论的 class .disabled 的用法：
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 翻页的状态</title>
<link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<script src="/scripts/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
</head>
<body> <ul class="pager">
<li class="previous disabled"><a href="#">← Older</a></li>
<li class="next"><a href="#">Newer →</a></li>
</ul> </body>
</html>
结果如下所示：
Bootstrap <基础十九>分页的更多相关文章
- bootstrap分页
使用bootstrap分页插件,如下代码是html代码 <title>分页</title> <link href="page/bootstrap-3.3.5-d ...
- bootstrap 分页
1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp ...
- bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
- Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示 标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
- bootstrap分页插件的使用
项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...
- Bootstrap分页插件ajax返回数据，工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...
- yii使用bootstrap分页样式
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
- bootstrap 分页表格插件
找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件 使用及简单案例 文档介绍:http: ...
- Bootstrap分页插件--Bootstrap Paginator
开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: & ...
- bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)
html部分: <ul class="pagination"></ul> <!--bootstrap3版本用ul包裹--> <div cl ...
随机推荐
- 前端 JS POST提交
/*点击事件*/ function deleteExportItemAndEportUser(id) { post("deleteExportItemAndEportUser" ...
- 微信小程序-上传下载
wx.uploadFile(OBJECT) 上传 将本地资源上传到开发者服务器.如页面通过 wx.chooseImage(图片)/wx.chooseVideo(视频) 等接口获取到一个本地资源的临时文 ...
- 手势（UIGestureRecognizer）
通过继承 UIGestureRecognizer 类,实现自定义手势(手势识别器类). PS:自定义手势时,需要 #import <UIKit/UIGestureRecognizerSubcla ...
- display inline-block 垂直居中
table td:after {display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}
- Jenkins console输出乱码???
jenkins console输出乱码??? 在jenkins中job执行shell,console中出现乱码如下: [WARNING] /home/mtime/data/jenkins/worksp ...
- [bzoj3192][JLOI2013]删除物品(树状数组)
3192: [JLOI2013]删除物品 Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 872 Solved: 508[Submit][Status ...
- winform右下角弹窗
网页是否经常在电脑右下角弹窗显示消息?其实Winform也是可以实现的.下面介绍两种方法. 第一步:设计窗体 第二步:实现代码 第一种方法 引用user32 声明常量 窗体Load事件 窗体FormC ...
- webpack 学习笔记
1.html-webpack-plugin 该插件主要作用是在release时,自动向index.html 文件中写入 <script>xx/xx/bundle.js</script ...
- 转：Eclipse插件开发之TreeViewer
http://www.tuicool.com/articles/e6fmE3R contentprovider在插件开发和RCP(Rich Client Platform)开发中常常被用到,譬如你要创 ...
- CI 3.0.6 控制器打印base_url 地址不为 localhost的解决方法
1.在application\config\autoload.php 第92行 加载url $autoload['helper'] = array('url'); 2.application\c ...