首页
所有分类
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 相关文章推荐
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
JavaScript异步编程:异步数据收集的具体方法
Aug 19 Javascript
js实现倒计时时钟的示例代码
Dec 17 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
Feb 22 Javascript
javascript 面向对象function详解及实例代码
Feb 28 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
Jul 23 Javascript
vue监听input标签的value值方法
Aug 27 Javascript
ES6使用export和import实现模块化的方法
Sep 10 Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 Javascript
如何用JS实现网页瀑布流布局
Apr 24 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
redo log(1) instantclient(1) 写入策略(1) B+树(2) 增删改查(2) MIME(1) binlog(2) 存储过程(3) 优化(1) 抖音(1)
You might like
学习使用curl采集curl使用方法
2012/01/11 PHP
在PHP上显示JFreechart画的统计图方法
2013/11/03 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
php输出指定时间以前时间格式的方法
2015/03/21 PHP
thinkPHP5.0框架模块设计详解
2017/03/18 PHP
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
seajs1.3.0源码解析之module依赖有序加载
2012/11/07 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
Sublime Text 3常用插件及安装方法
2015/12/16 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
jQuery动态修改字体大小的方法【测试可用】
2016/09/09 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
javascript定时器的简单应用示例【控制方块移动】
2019/06/17 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
2019/11/12 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
2020/01/21 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
2020/03/03 Javascript
[01:00:25]2018DOTA2亚洲邀请赛3月30日 小组赛A组 VG VS Liquid
2018/03/31 DOTA
python使用PyGame绘制图像并保存为图片文件的方法
2015/04/24 Python
Python中实现三目运算的方法
2015/06/21 Python
python操作mysql代码总结
2018/06/01 Python
python使用tornado实现登录和登出
2018/07/28 Python
Python计算一个点到所有点的欧式距离实现方法
2019/07/04 Python
如何在django中运行scrapy框架
2020/04/22 Python
网页布局中CSS样式无效的十个重要原因详解
2017/08/10 HTML / CSS
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
荷兰优雅女装网上商店：Heine
2016/11/14 全球购物
经典大学生求职信范文
2014/01/06 职场文书
2015年学校精神文明工作总结
2015/05/27 职场文书
2016年教师节慰问信
2015/12/01 职场文书
入党转正申请自我鉴定
2019/06/25 职场文书
python中%格式表达式实例用法
2021/06/18 Python