首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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判断窗口是否最小化的代码(跨浏览器)
Aug 01 Javascript
node.js中使用socket.io制作命名空间
Dec 15 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
简单谈谈JavaScript的同步与异步
Dec 31 Javascript
详解javascript new的运行机制
Jan 26 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
JQuery实现DIV其他动画效果的简单实例
Sep 18 Javascript
Web性能优化系列 10个提升JavaScript性能的技巧
Sep 27 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
Dec 08 Javascript
canvas实现绘制吃豆鱼效果
Jan 12 Javascript
Node.js使用MySQL连接池的方法实例
Feb 11 Javascript
微信小程序之swiper滑动面板用法示例
Dec 04 Javascript
浅谈Node.js：fs文件系统模块
Dec 08 #Javascript
Bootstrap基本插件学习笔记之模态对话框(16)
Dec 08 #Javascript
概述BootStrap中role=&quot;form&quot;及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
承诺书(369) 委托书(259) 建议书(203) 担保书(46) 竞聘书(31) 责任书(145) 聘任书(31) 广告词(105) 主持词(345) 意向书(73)
You might like
ip签名探针
2006/10/09 PHP
简单的php文件上传（实例）
2013/10/27 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
php微信公众账号开发之前五个坑（一）
2016/09/18 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
createElement与createDocumentFragment的点点区别小结
2011/12/19 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
2014/10/23 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery事件绑定与解除绑定实现方法
2015/04/15 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
微信小程序实现顶部选项卡(swiper)
2020/06/19 Javascript
微信小程序使用form表单获取输入框数据的实例代码
2018/05/17 Javascript
在vue里使用codemirror遇到的问题
2018/11/01 Javascript
详解Vue中使用插槽（slot）、聚类插槽
2019/04/12 Javascript
layer.prompt使文本框为空的情况下也能点击确定的方法
2019/09/24 Javascript
微信小程序开发（一）：服务器获取数据列表渲染操作示例
2020/06/01 Javascript
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python获取暗黑破坏神3战网前1000命位玩家的英雄技能统计
2016/07/04 Python
使用tensorflow实现线性svm
2018/09/07 Python
python使用建议与技巧分享（一）
2020/08/17 Python
关于Python不换行输出和不换行输出end=““不显示的问题(亲测已解决)
2020/10/27 Python
鲜为人知的HTML5语音合成功能
2019/05/17 HTML / CSS
Spartoo比利时：欧洲时尚购物网站
2017/12/06 全球购物
英国IT硬件供应商，定制游戏PC：Mesh Computers
2019/03/28 全球购物
优秀医生事迹材料
2014/02/12 职场文书
房产公证书范本
2014/04/10 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
低碳环保口号
2014/06/12 职场文书
工作检讨书范文
2015/01/23 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
Jupyter notebook 输出部分显示不全的解决方案
2021/04/24 Python
用python画城市轮播地图
2021/05/28 Python