首页
所有分类
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 相关文章推荐
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 Javascript
window.open不被拦截的实现代码
Aug 22 Javascript
JQuery-tableDnD 拖拽的基本使用介绍
Jul 04 Javascript
js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
Dec 11 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
Vue学习笔记进阶篇之单元素过度
Jul 19 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
js实现贪吃蛇小游戏（加墙）
Jul 31 Javascript
如何编写一个 Webpack Loader的实现
Oct 18 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
map(4) DFA(1) random(1) 切片(1) Slice(1) linux(15) pygame(3) WeUI(1) 指针(1) 结构体(1)
You might like
长波知识介绍
2021/03/01 无线电
用PHP实现 上一篇、下一篇的代码
2012/09/29 PHP
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
Mootools 1.2教程 输入过滤第二部分（字符串）
2009/09/15 Javascript
基于IE下ul li 互相嵌套时的bug,排查,解决过程以及心得介绍
2013/05/07 Javascript
offsetHeight在OnLoad中获取为0的现象
2013/07/22 Javascript
jquery.form.js框架实现文件上传功能案例解析（springmvc）
2016/05/26 Javascript
简单三步实现报表页面集成天气
2016/12/15 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
vue 标签属性数据绑定和拼接的实现方法
2018/05/17 Javascript
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
浅谈实现在线预览PDF的几种解决办法
2020/08/10 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
Python AES加密实例解析
2018/01/18 Python
使用pth文件添加Python环境变量方式
2020/05/26 Python
欧舒丹加拿大官网：L’Occitane加拿大
2017/10/29 全球购物
LINUX下线程，GDI类的解释
2012/04/17 面试题
医学生实习自我鉴定
2013/09/27 职场文书
机电专业毕业生推荐信
2013/11/10 职场文书
酒店拾金不昧表扬信
2014/01/18 职场文书
文明餐桌行动实施方案
2014/02/19 职场文书
高一学生评语大全
2014/04/25 职场文书
2014年端午节演讲稿范文
2014/05/23 职场文书
共产党员岗位承诺书
2014/05/29 职场文书
广播体操比赛口号
2014/06/10 职场文书
人大调研汇报材料
2014/08/14 职场文书
个人对照检查材料思想汇报
2014/09/26 职场文书
原生JS实现飞机大战小游戏
2021/06/09 Javascript
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
聊聊redis-dump工具安装问题
2022/01/18 Redis