Bootstrap基本组件学习笔记之分页(12)

更新时间：2016年12月08日 09:24:07 作者：kikay

这篇文章主要为大家详细介绍了Bootstrap基本组件学习笔记之分页,具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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="#">&laquo;</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="#">&raquo;</a></li>
 </ul>
 </div>
</div>
</body>
</html>

效果如下：

上面增加了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="#">&laquo;</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="#">&raquo;</a></li>
  <li>&nbsp;</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>

效果如下：

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>

效果如下：

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

JS实现批量上传文件并显示进度功能
这篇文章主要介绍了JS实现批量上传文件并显示进度功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-06-06
HTML元素拖拽功能实现的完整实例
这篇文章主要给大家介绍了关于HTML元素拖拽功能实现的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-12-12
JavaScript对象原型链原理解析
这篇文章主要介绍了JavaScript对象原型链原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-01-01
javascript实现的登陆遮罩效果汇总
小编给大家推荐几款使用Javascript实现的遮罩效果登陆框，其实这种效果是很常见的，在许多互动的社区及其它的一些地方，弹出框应用想当流行，在不妨碍网页运行的情况下，用户可以输入登录信息，实现完美登录。
2015-11-11
js实现特别简单的钟表效果
这篇文章主要为大家详细介绍了js实现特别简单的钟表效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
JS显示日历和天气的方法
这篇文章主要介绍了JS显示日历和天气的方法,涉及JavaScript日期与时间的操作技巧,非常简单实用,需要的朋友可以参考下
2016-03-03
js实现动态添加上传文件页面
这篇文章主要为大家详细介绍了js实现动态添加上传文件页面，如何动态创建一个input标签示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-10-10
js字符串操作方法实例分析
这篇文章主要介绍了js字符串操作方法,实例分析了javascript中slice、substr及substring等方法的使用技巧,需要的朋友可以参考下
2015-05-05
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
这篇文章主要介绍了项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)的相关资料,需要的朋友可以参考下
2016-07-07
js正则表达式验证邮件地址
这篇文章主要介绍了js正则表达式验证邮件地址，利用javaScript语言实现一下电子邮件地址验证程序，使用的是JavaScript语言的正则表达式库，感兴趣的小伙伴们可以参考一下
2015-11-11