首页
所有分类
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 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
js的逻辑运算符 ||
May 31 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
Jul 10 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
浅析JavaScript动画
Jun 10 Javascript
对象转换为原始值的实现方法
Jun 06 Javascript
JS图片压缩（pc端和移动端都适用）
Jan 12 Javascript
微信小程序授权登录解决方案的代码实例（含未通过授权解决方案）
May 10 Javascript
vue视图不更新情况详解
May 16 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 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) HttpClient(1) 注解(1) Quartz(1) Hive(5) dataBinding(1) BottomSheetDialog(1) ip2region(1) Windows Server 2022(3) RestTemplate(1)
You might like
了解Joomla 这款来自国外的php网站管理系统
2010/03/11 PHP
php 调试利器debug_print_backtrace()
2012/07/23 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
菜鸟学习JavaScript小实验之函数引用
2010/11/17 Javascript
JS 进度条效果实现代码整理
2011/05/21 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
如何使用pm2快速将项目部署到远程服务器
2019/03/12 Javascript
Vue中keep-alive组件的深入理解
2020/08/23 Javascript
[55:04]海涛DOTA2死魂复燃6.82版本介绍
2014/09/28 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
python实现获取序列中最小的几个元素
2014/09/25 Python
python实现两个文件合并功能
2018/04/01 Python
Python 编码规范(Google Python Style Guide)
2018/05/05 Python
Django框架使用富文本编辑器Uedit的方法分析
2018/07/31 Python
python实现多人聊天室
2020/03/31 Python
详解Python发送email的三种方式
2018/10/18 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python实现飞机大战项目
2020/03/11 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
Sneaker Studio匈牙利：购买运动鞋
2018/03/26 全球购物
C/C++ 笔试、面试题目大汇总
2015/11/21 面试题
this关键字的作用
2016/01/30 面试题
土木工程应届生自荐信
2013/09/24 职场文书
小学生演讲稿
2014/01/12 职场文书
同学会主持词
2014/03/18 职场文书
优质护理服务演讲稿
2014/05/07 职场文书
电视节目策划方案
2014/05/16 职场文书
《我爱祖国》演讲稿1000字
2014/09/26 职场文书
学生保证书
2015/01/16 职场文书
个人年终总结范文
2015/03/09 职场文书
联谊会开场白
2015/06/01 职场文书
golang中的空slice案例
2021/04/27 Golang
pytorch MSELoss计算平均的实现方法
2021/05/12 Python