首页
所有分类
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 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
javascript对select标签的控制(option选项/select)
Jan 31 Javascript
jquery 页面滚动到底部自动加载插件集合
Jan 31 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
node.js中的dns.getServers方法使用说明
Dec 08 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
Node.js实用代码段之获取Buffer对象字节长度
Mar 17 Javascript
json传值以及ajax接收详解
May 24 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
详解JS中的立即执行函数
Feb 24 Javascript
微信小程序学习笔记之登录API与获取用户信息操作图文详解
Mar 29 Javascript
在vue项目中promise解决回调地狱和并发请求的问题
Nov 09 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
封装(1) 主从复制(1) gRPC(3) 表约束(2) transaction(1) Master(1) 百度地图(1) variables(1) PyAutoGUI(1) Slave(1)
You might like
常用PHP数组排序函数归纳
2016/08/08 PHP
PHP addslashes()函数讲解
2019/02/03 PHP
javascript中万恶的function实例分析
2011/05/25 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js判断浏览器类型的方法
2013/08/07 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
jquery创建表格(自动增加表格)代码分享
2013/12/25 Javascript
JS控制按钮10秒钟后可用的方法
2015/12/22 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
Vue.JS入门教程之事件监听
2016/12/01 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
详解微信小程序canvas圆角矩形的绘制的方法
2018/08/22 Javascript
vue微信分享到朋友圈 vue微信发送给好友
2018/11/28 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
小程序云开发之用户注册登录
2019/05/18 Javascript
JavaScript实现五子棋游戏的方法详解
2019/07/08 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[01:16:16]DOTA2-DPC中国联赛定级赛 RNG vs Phoenix BO3第二场 1月8日
2021/03/11 DOTA
深入理解Python中的 __new__ 和 __init__及区别介绍
2018/09/17 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python对于requests的封装方法详解
2019/01/03 Python
python实现批量转换图片为黑白
2020/06/16 Python
python脚本第一行如何写
2020/08/30 Python
在pycharm中使用pipenv创建虚拟环境和安装django的详细教程
2020/11/30 Python
举例讲解Python装饰器
2020/12/24 Python
selenium+python自动化78-autoit参数化与批量上传功能的实现
2021/03/04 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
广告学专业自荐信范文
2014/02/24 职场文书
食堂标语大全
2014/06/11 职场文书
小学四年级学生评语
2014/12/26 职场文书
初二学生评语大全
2014/12/26 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2016关于学习党章的心得体会
2016/01/15 职场文书
实习员工转正的评语汇总，以备不时之需
2019/12/17 职场文书