首页
所有分类
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 相关文章推荐
JavaScript中String.match()方法的使用详解
Jun 06 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
Jan 29 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
微信小程序 教程之wxapp视图容器 swiper
Oct 19 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
jQuery插件HighCharts实现的2D面积图效果示例【附demo源码下载】
Mar 15 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
纯JavaScript实现实时反馈系统时间
Oct 26 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
Oct 23 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 Javascript
vue如何实现关闭对话框后刷新列表
Apr 08 Vue.js
浅谈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
create(1) TableField(1) 子查询(1) Mybatis-Plus(3) frozenset(1) el-table(1) 脚手架(2) nginx(76) mounted(1) Next.js(1)
You might like
PHP代码网站如何防范SQL注入漏洞攻击建议分享
2012/03/01 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
解析func_num_args与func_get_args函数的使用
2013/06/24 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
PHP+Mysql+jQuery查询和列表框选择操作实例讲解
2015/10/22 PHP
javascript Keycode对照表
2009/10/24 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
Javascript 正则表达式实现为数字添加千位分隔符
2015/03/10 Javascript
浅谈js中的三种继承方式及其优缺点
2016/08/10 Javascript
探讨跨域请求资源的几种方式（总结）
2016/12/02 Javascript
js实现一个可以兼容PC端和移动端的div拖动效果实例
2016/12/09 Javascript
jQuery中绑定事件bind() on() live() one()的异同
2017/02/23 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
Element Notification通知的实现示例
2020/07/27 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
python中关于日期时间处理的问答集锦
2013/03/08 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
快速入门python学习笔记
2017/12/06 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
wxPython实现带颜色的进度条
2019/11/19 Python
Mac中PyCharm配置Anaconda环境的方法
2020/03/04 Python
Python切割图片成九宫格的示例代码
2020/03/10 Python
英国人最爱的饰品网站：Accessorize
2016/08/22 全球购物
2019年分享net面试的经历和题目
2016/08/07 面试题
护士演讲稿范文
2014/01/05 职场文书
《纸船和风筝》教学反思
2014/02/15 职场文书
公司领导班子四风对照检查材料
2014/09/27 职场文书
2015年医院创卫工作总结
2015/04/22 职场文书
与死神共舞观后感
2015/06/15 职场文书
安全生产协议书
2016/03/22 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript