Bootstrap基本组件学习笔记之分页(12)

DJPLH 2016-12-08

Bootstrap提供了对分页的良好支持。

0x01 默认的分页

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>默认的分页</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>默认的分页</h1>
 </div>
 <div>
 <ul class="pagination">
  <li class="disabled"><a href="#">«</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="#">»</a></li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之分页(12)

上面增加了disabled和active的效果。

0x02 综合案例

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>分页</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>分页</h1>
 </div>
 <div>
 <ul class="pagination">
  <li class="disabled"><a href="#">«</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="#">»</a></li>
  <li> </li>
  <li>
  <label for="text">跳转到:</label><input type="text" class="text-info" id="text" size="10">
  </li>
  <li>
  <button class="btn btn-primary">Go</button>
  </li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之分页(12)

0x03 翻页

下面的例子演示.pager的样式：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link href="../../css/bootstrap.min.css" rel="stylesheet">
 <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
 <script src="../../js/bootstrap.min.js"></script>
 <title>翻页</title>
</head>
<body>
<div class="container">
 <div class="page-header">
 <h1>翻页</h1>
 </div>
 <div>
 <ul class="pager">
  <li class="previous"><a href="#">前一页</a></li>
  <li class="next"><a href="#">后一页</a></li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下：

Bootstrap基本组件学习笔记之分页(12)

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

DJPLH

DJPLH

相关推荐

bootstrap 分页学习笔记

.pagination > li,.pagination > li > a, .pagination > li > span {

zh000 / 0评论 2015-07-22

bootstrap 简易表格、分页、查询

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>. <

opspider / 0评论 2018-10-27

bootstrap 简易表格、分页、查询

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>. <

zxcasd / 0评论 2018-10-27

Bootstrap分页插件--Bootstrap Paginator

currentPage: 3,totalPages: 10,return "First";return "Previous";return "Next";return "Last&quo

jingtianyiyi / 0评论 2016-01-06

资源: 优秀插件收集-布局,表格,分页,树形

gridster.js这是神话般的拖动和拖放多列网格已经到来。Gridster是一个jQuery插件，允许建立直观的拖动的布局元素跨越多个列。dad.js是一个简单易用的jQuery拖放插件，无需jQueryUI库支持，兼容Bootstrap表格布局。Sa

AnneZhao / 0评论 2015-11-17

bootstrap 分页学习笔记

<nav><ul class="pagination pagination-sm">...</ul></nav>自己写的一个分页demo. .pagination > li,.pag

zh000 / 0评论 2015-07-22

bootstrap组件5

当网页内容过多时，我们需要分页显示。Bootstrap中有分页组件，使用pagination类来修饰一个分页。默认的分页实例代码：。使用.disabled来禁用连接，用.active显示是当前页，同时还可以通过.pagination-lg或paginati

twtonrg / 0评论 2013-11-17

Bootstrap 分页

下表列出了 Bootstrap 提供的处理分页的 class。Class描述示例代码.pagination添加该 class 来在页面上显示分页。&lt;ul class="pagination"&gt;.disable

DHCliaozheng / 0评论 2017-03-12

bootstrap paginator分页插件的两种使用方式实例详解

});注意：1. bootstrap3中分页的HTML部分要求使用ul标签；2. 前台写分页算法。case "next": return "下一页";

twtonrg / 0评论 2017-11-14

bootstrap table表格客户端分页实例

bootstrap-table是非常方便好用的前端表格分页插件，使用者只需要提供数据源就能实现非常完美的分页效果，其分页方式可以分成客户端分页和服务端分页，其接收的数据源都是json数据格式。服务端分页在项目中应用得非常的广泛，但有时也需要使用客户端分页来

niepxiya / 0评论 2017-08-07

BootStrap Table前台和后台分页对JSON格式的要求

Bootstrap是一款前端非常流行的框架，其中的表格更为大家经常使用。大家都知道表格的分页分为前台和后台分页，也就是表格配置中sidePagination属性，当sidePagination: "server"时表示后台分页，side

乔乔 / 0评论 2017-06-28

Bootstrap table学习笔记（2） 前后端分页模糊查询

前端分页相当简单，在我添加了2w条测试数据的时候打开的很流畅，没有卡顿。var d = '<button href="#" class="btn btn-default" mce_href="#&qu

相信未来 / 0评论 2017-05-18

Bootstrap jquery.twbsPagination.js动态页码分页实例代码

//重置分页组件否则保留上次查询的，一般来说很多问题出现与这三行代码有关如：虽然数据正确但是页码不对仍然为上一次查询出的一致。+ " location='"+userlog.details+"' class='btn btn-

DJPLH / 0评论 2017-02-20

BootStrap Table后台分页时前台删除最后一页所有数据refresh刷新后无数据问题

主要是页码超出范围带来的问题,仅在此记录一下,这里我通过修改bootstrap-table.js的initServer方法中的查询success回调函数解决,将该回调函数改为：。=0&&res.rows.length==0){//总记录数大

lixia / 0评论 2016-12-28

jquery pagination插件动态分页实例(Bootstrap分页)

<!DOCTYPE html>. <!<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />. <

程序员哦 / 0评论 2016-12-23

Bootstrap table两种分页示例

[json]必须包含：total节点，rows节点 即：{“total”:24,”rows”:[…//默认值为 'limit',传给服务端的参数为：limit, offset, search, sort, order Else. var a = '<

iChangebaobao / 0评论 2016-12-23

Bootstrap和Java分页实例第一篇

bootstrap是前端很流行的框架，正在开发的项目，用bootstrap搭建起来的页面，自我感觉很完美，终于告别了苍白无力的白花花的难看的……现在遇到了bootstrap的分页与Java后台结合起来的分页封装问题，对于我这个Java菜鸟来说，包装分页还没

Chinahdy / 0评论 2016-12-23

基于Bootstrap仿淘宝分页控件实现代码

大家都应该上过淘宝的吧，没有上过淘宝的同学估计也没几个了，但是我相信大多数的人都是在淘宝上面买完东西就下线，很少有人会关注淘宝上的设计这类的，但是对于普通人这样还行，但是对于一个程序员这样就可不行了，因为博主本人是从事前端方面的工作，所以就通过仿照淘宝的设

相信未来 / 0评论 2016-11-07

BootStrap中Table分页插件使用详解

分页，是一种无序列表，Bootstrap 像处理其他界面元素一样处理分页。bootstrap-table 是一个轻量级的table插件，使用AJAX获取JSON格式的数据，其分页和数据填充很方便，支持国际化。bootstrap-table获取数据有两种方式

iChangebaobao / 0评论 2019-05-08

Bootstrap Table服务器分页与在线编辑应用总结

表格用来显示数据库中的数据，数据通过AJAX从服务器加载，同时分页功能有服务器实现，避免客户端分页，在加载大量数据时造成的用户体验不好。还可以设置查询数据的起止时间，查询一定时间范围的数据。在线编辑功能通过扩展Bootstrap Table实现，使用X-e

男儿何必尽成功 / 0评论 2016-08-08

Bootstrap Paginator分页插件使用方法详解

最近做的asp.netMVC项目中需要对数据列表进行分类，这个本来就是基于bootstrap开发的后台，因此也就想着bootstrap是否有分页插件呢，或者说是基于jquery支持的分页功能，这样整体的网站后台风格便能够统一，又不用自己去写一套分页的功能。

wuchangjian / 0评论 2016-05-30

Bootstrap table分页问题汇总

首先非常感谢作者针对bootstrap table分页问题进行详细的整理，并分享给了大家，希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题，谢谢大家的阅读。问题1 ：服务器端取不到form值，querystring没有问题，但是

lixia / 0评论 2016-05-30

yii使用bootstrap分页样式的实例

Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语

乔乔 / 0评论 2017-01-17

ThinkPHP 整合Bootstrap Ajax分页样式

$count= $Role->where->count();// 查询满足要求的总记录数。$Page =new \Think\AjaxPage;// 实例化分页类 传入总记录数、ajax更新的局部页面ID和每页显示的记录数。$Page->

TemplarAssassin / 0评论 2016-12-23

Thinkphp和Bootstrap结合打造个性的分页样式(推荐)

先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单的数字，之间的空隙比较小，不大容易点，还有那个“前5页”和“后5页”显得有点多余，因为点击当前显示第一页的“上一页”按钮会自然出来前5页。针对以上种种不太理想的

稳哥的小灶 / 0评论 2016-08-01

AJAX +SpringMVC 实现bootstrap模态框的分页查询功能

pagination += 0 + ");'> 首页</a></li>";pagination += + ");'> 上一页</a></li>";

ZHOUJIANTANK / 0评论 2019-04-06