编程 Javascript

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

Posted in Javascript onDecember 08, 2016

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基本组件学习笔记之分页(12)

- Author -

kikay

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 解决表单仍然提交即使监听处理函数返回false

Mar 14 Javascript

JQuery上传插件Uploadify使用详解及错误处理

Apr 27 Javascript

js中获取事件对象的方法小结

Mar 13 Javascript

利用JQuery动画制作滑动菜单项效果实现步骤及代码

Feb 07 Javascript

JS实现仿百度输入框自动匹配功能的示例代码

Feb 19 Javascript

Vue.js 2.0 移动端拍照压缩图片上传预览功能

Mar 06 Javascript

vue 如何添加全局函数或全局变量以及单页面的title设置总结

Jun 01 Javascript

jQuery实现全选、反选和不选功能

Aug 16 jQuery

VUE脚手架的下载和配置步骤详解

Apr 01 Javascript

微信小程序—setTimeOut定时器的问题及解决

Jul 26 Javascript

详解Vue 换肤方案验证

Aug 28 Javascript

JQuery省市联动效果实现过程详解

May 08 jQuery

浅谈Node.js：fs文件系统模块

Dec 08 #Javascript

Bootstrap基本插件学习笔记之模态对话框(16)

Dec 08 #Javascript

概述BootStrap中role="form"及role作用角色

Dec 08 #Javascript

Bootstrap基本插件学习笔记之标签切换(17)

Dec 08 #Javascript

Bootstrap基本插件学习笔记之Popover提示框(19)

Dec 08 #Javascript

JS焦点图,JS 多个页面放多个焦点图的实例

Dec 08 #Javascript

BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法

Dec 08 #Javascript

You might like

用session做客户验证时的注意事项

2006/10/09 PHP

php.ini中date.timezone设置分析

2011/07/29 PHP

php利用新浪接口查询ip获取地理位置示例

2014/01/20 PHP

基于yaf框架和uploadify插件，做的一个导入excel文件，查看并保存数据的功能

2017/01/24 PHP

laravel实现批量更新多条记录的方法示例

2017/10/22 PHP

javascript 清除输入框中的数据

2009/04/13 Javascript

onclick与listeners的执行先后问题详细解剖

2013/01/07 Javascript

JavaScript获取和设置CheckBox状态的简单方法

2013/07/05 Javascript

javascript垃圾收集机制与内存泄漏详细解析

2013/11/11 Javascript

jquery实现浮动的侧栏实例

2015/06/25 Javascript

jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法

2015/11/25 Javascript

JavaScript基本语法学习教程

2016/01/14 Javascript

深入解析JavaScript框架Backbone.js中的事件机制

2016/02/14 Javascript

深入理解JavaScript中的for循环

2017/02/07 Javascript

Node.js Mongodb 密码特殊字符 @的解决方法

2017/04/11 Javascript

详解vue 模版组件的三种用法

2017/07/21 Javascript

vue.js框架实现表单排序和分页效果

2017/08/09 Javascript

基于vue.js路由参数的实例讲解——简单易懂

2017/09/07 Javascript

Node.js实现发送邮件功能

2017/11/06 Javascript

JavaScript捕捉事件和阻止冒泡事件实例分析

2018/08/03 Javascript

详解可以用在VS Code中的正则表达式小技巧

2019/05/14 Javascript

Python实现获取操作系统版本信息方法

2015/04/08 Python

探究Python多进程编程下线程之间变量的共享问题

2015/05/05 Python

Python批量创建迅雷任务及创建多个文件

2016/02/13 Python

python实现ip代理池功能示例

2019/07/05 Python

html5清空画布方法（三种）

2017/10/16 HTML / CSS

data:image data url 文件转为Blob上传后端的方法

2019/07/16 HTML / CSS

波兰在线杂货店：Polski Koszyk

2019/11/02 全球购物

String这个类型的class为何定义成final？

2012/11/13 面试题

存储过程的优点有哪些

2012/09/27 面试题

关于读书的演讲稿500字

2014/08/27 职场文书

2014年仓库管理工作总结

2014/12/17 职场文书

男方婚礼答谢词

2015/01/20 职场文书

离婚协议书的范本

2015/01/27 职场文书

酒店总经理岗位职责

2015/04/01 职场文书

Python破解极验滑动验证码详细步骤

2021/05/21 Python