首页
所有分类
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 06 Javascript
用javascript删除当前行,添加行(示例代码)
Nov 25 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
JavaScript中的迭代器和生成器详解
Oct 29 Javascript
javascript父子页面通讯实例详解
Jul 17 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
js操作数组函数实例小结
Dec 10 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
jQuery 开发之EasyUI 添加数据的实例
Sep 26 jQuery
在 webpack 中使用 ECharts的实例详解
Feb 05 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
Mar 28 Javascript
Java 生成随机字符的示例代码
Jan 13 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
DE1102(1) R9700(1) R72E(1) WR-800F(1) React(6) 胆机(1) 对讲机(1) GTX1660(1) ICOM(2) R71E(1)
You might like
javascript 带有滚动条的表格,标题固定,带排序功能.
2009/11/13 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
js arguments,jcallee caller用法总结
2013/11/30 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
jquery检测input checked 控件是否被选中的方法
2014/03/26 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
js实现数组转换成json
2015/06/26 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
使用jQuery 操作table 完成单元格合并的实例
2017/12/27 jQuery
vue+element实现批量删除功能的示例
2018/02/28 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
jQuery 导航自动跟随滚动的实现代码
2018/05/30 jQuery
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
[04:23]DOTA2上海特锦赛小组赛第一日 TOP10精彩集锦
2016/02/27 DOTA
python 中的列表解析和生成表达式
2011/03/10 Python
python发送邮件实例分享
2017/07/28 Python
Python图形绘制操作之正弦曲线实现方法分析
2017/12/25 Python
python矩阵转换为一维数组的实例
2018/06/05 Python
对python for 文件指定行读写操作详解
2018/12/29 Python
python中使用 xlwt 操作excel的常见方法与问题
2019/01/13 Python
python用match()函数爬数据方法详解
2019/07/23 Python
在Python中利用pickle保存变量的实例
2019/12/30 Python
python mysql 字段与关键字冲突的解决方式
2020/03/02 Python
Python socket处理client连接过程解析
2020/03/18 Python
Python SMTP配置参数并发送邮件
2020/06/16 Python
学python需要去培训机构吗
2020/07/01 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
什么情况下你必须要把一个类定义为abstract的
2013/01/06 面试题
医院门卫岗位职责
2013/12/30 职场文书
大学军训感言300字
2014/03/09 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
教师批评与自我批评
2014/10/15 职场文书
变长双向rnn的正确使用姿势教学
2021/05/31 Python
Python制作动态字符画的源码
2021/08/04 Python