首页
所有分类
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 相关文章推荐
DOM 中的事件处理介绍
Jan 18 Javascript
解析瀑布流布局:JS+绝对定位的实现
May 08 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
js实现网页抽奖实例
Aug 05 Javascript
JS实现点击Radio动态更新table数据
Jul 18 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
vue-cli axios请求方式及跨域处理问题
Mar 28 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
关于Vue中axios的封装实例详解
Oct 20 Javascript
vue项目出现页面空白的解决方案
Oct 31 Javascript
详解基于element的区间选择组件校验(交易金额)
Jan 07 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
Quartz(1) dataBinding(1) BottomSheetDialog(1) RestTemplate(1) HttpClient(1) scrapy(1) 注解(1) DeOldify(1) ip2region(1) 反射(1)
You might like
PHP语法速查表
2007/01/02 PHP
PHP 程序员应该使用的10个组件
2009/10/31 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
给WordPress中的留言加上楼层号的PHP代码实例
2015/12/14 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
PHP 枚举类型的管理与设计知识点总结
2020/02/13 PHP
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
AngularJS入门知识之MVW类框架的编程思想探讨
2014/12/08 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
浅析JavaScript Array和string的转换(推荐)
2016/05/20 Javascript
使用jquery提交form表单并自定义action的方法
2016/05/25 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
vue.js+Element实现表格里的增删改查
2017/01/18 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
Javascript地址引用代码实例解析
2020/02/25 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[01:20:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第四场 8.26
2018/08/30 DOTA
Python基础练习之用户登录实现代码分享
2017/11/08 Python
详解Python3网络爬虫(二)：利用urllib.urlopen向有道翻译发送数据获得翻译结果
2019/05/07 Python
浅析PyTorch中nn.Linear的使用
2019/08/18 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python2与Python3的区别点整理
2019/12/12 Python
浅谈python之自动化运维(Paramiko)
2020/01/31 Python
Python使用for生成列表实现过程解析
2020/09/22 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
Abbott Lyon官网：女士手表、珠宝及配件
2020/12/26 全球购物
课内比教学心得体会
2014/09/09 职场文书
2014年“四风”问题个人整改措施
2014/09/17 职场文书
重阳节慰问信
2015/02/15 职场文书
开学第一天的感想
2015/08/10 职场文书
给学校的建议书400字
2015/09/14 职场文书
大学生村官工作心得体会
2016/01/23 职场文书
Go语言切片前或中间插入项与内置copy()函数详解
2021/04/27 Golang
java executor包参数处理功能 
2022/02/15 Java/Android