首页
所有分类
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 面向对象的JavaScript类
May 04 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
使用C++为node.js写扩展模块
Apr 22 Javascript
jquery正则表达式验证（手机号、身份证号、中文名称）
Dec 31 Javascript
JS事件添加和移出的兼容写法示例
Jun 20 Javascript
AngularJS中一般函数参数传递用法分析
Nov 22 Javascript
vue.js 初体验之Chrome 插件开发实录
May 13 Javascript
JS中把函数作为另一函数的参数传递方法(总结)
Jun 28 Javascript
PHP 实现一种多文件上传的方法
Sep 20 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
基于JavaScript实现简单的轮播图
Mar 03 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) 信息校验(1) Coroutine(1) Excel(4) 正则表达式(3) greenlet(1) 分区(2) gevent(1) pytest(3)
You might like
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
javascript 玩转Date对象(实例讲解)
2017/07/11 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
vee-validate vue 2.0自定义表单验证的实例
2018/08/28 Javascript
学习jQuery中的noConflict()用法
2018/09/28 jQuery
详解如何webpack使用DllPlugin
2018/09/30 Javascript
wx-charts 微信小程序图表插件的具体使用
2019/08/18 Javascript
js脚本中执行java后台代码方法解析
2019/10/11 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
2019/10/23 Javascript
Laravel 如何在blade文件中使用Vue组件的示例代码
2020/06/28 Javascript
[02:28]DOTA2英雄基础教程 灰烬之灵
2013/12/19 DOTA
python使用in操作符时元组和数组的区别分析
2015/05/19 Python
基于Python中求和函数sum的用法详解
2018/06/28 Python
pandas.DataFrame选取/排除特定行的方法
2018/07/03 Python
python框架中flask知识点总结
2018/08/17 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
zooplus德国：便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
super()与this()的区别
2016/01/17 面试题
新东网科技Java笔试题
2012/07/13 面试题
《我为你骄傲》教学反思
2014/02/20 职场文书
舞蹈兴趣小组活动总结
2014/07/07 职场文书
党员学习党的群众路线思想汇报（5篇）
2014/09/10 职场文书
导游词400字
2015/02/13 职场文书
三严三实学习心得体会（精选N篇）
2016/01/05 职场文书
java泛型通配符详解
2021/07/25 Java/Android
利用js实现简单开关灯代码
2021/11/23 Javascript