首页
所有分类
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 相关文章推荐
使用jquery hover事件实现表格的隔行换色功能示例
Sep 03 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
JavaScript html5利用FileReader实现上传功能
Mar 27 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
Oct 19 Javascript
Vue SPA单页应用首屏优化实践
Jun 28 Javascript
Node爬取大批量文件的方法示例
Jun 28 Javascript
layui点击按钮页面会自动刷新的解决方案
Oct 25 Javascript
vue 导航内容设置选中状态样式的例子
Nov 01 Javascript
antd多选下拉框一行展示的实现方式
Oct 31 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
set(1) pip(1) 并发(8) most_common(1) frozenset(1) Counter(1) SingleFlight(2) Xpath(1) 字典(3) 爬虫(2)
You might like
PHP管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
php下Memcached入门实例解析
2015/01/05 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
php爬取天猫和淘宝商品数据
2018/02/23 PHP
php swoole多进程/多线程用法示例【基于php7nts版】
2019/08/12 PHP
Javascript 生成指定范围数值随机数
2009/01/09 Javascript
JQuery中each()的使用方法说明
2010/08/19 Javascript
js Array对象的扩展函数代码
2013/04/24 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
利用函数的惰性载入提高javascript代码执行效率
2014/05/05 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
JavaScript的History API使搜索引擎抓取AJAX内容
2015/12/07 Javascript
如何通过js实现图片预览功能【附实例代码】
2016/03/30 Javascript
JS传值出现中文参数乱码的解决方法
2016/06/30 Javascript
jQuery事件处理的特征(事件命名机制)
2016/08/23 Javascript
详解webpack+es6+angular1.x项目构建
2017/05/02 Javascript
vue 将页面公用的头部组件化的方法
2017/12/18 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
ES6与CommonJS中的模块处理的区别
2018/06/13 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
[35:34]Liquid vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
numpy给array增加维度np.newaxis的实例
2018/11/01 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python自动识别文本编码格式代码
2019/12/26 Python
详解Python中的GIL(全局解释器锁)详解及解决GIL的几种方案
2021/01/29 Python
HTML5拖拽的简单实例
2016/05/30 HTML / CSS
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
伦敦的高级牛仔布专家：Trilogy
2018/08/06 全球购物
“四风”问题自我剖析材料思想汇报
2014/09/23 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
MySQL 角色(role)功能介绍
2021/04/24 MySQL