脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → Bootstrap分页组件

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尾递归的实现方法及代码优化技巧

    这篇文章主要介绍了JS尾递归的实现方法及代码优化技巧,结合实例形式分析了尾递归的原理、JS实现方法及优化技巧,需要的朋友可以参考下
    2019-01-01
  • JavaScript中内存泄漏的介绍与教程（推荐）

    JavaScript中内存泄漏的介绍与教程（推荐）

    内存泄露是指一块被分配的内存既不能使用，又不能回收，直到浏览器进程结束。下面这篇文章主要给的大家介绍了关于JavaScript中内存泄漏的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面来一起看看吧。
    2017-06-06
  • JavaScript中闭包之浅析解读(必看篇)

    JavaScript中闭包之浅析解读(必看篇)

    下面小编就为大家带来一篇JavaScript中闭包之浅析解读(必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 基于Bootstrap的UI扩展 StyleBootstrap

    基于Bootstrap的UI扩展 StyleBootstrap

    这篇文章主要为大家详细介绍了基于Bootstrap的UI扩展： StyleBootstrap，感兴趣的小伙伴们可以参考一下
    2016-06-06
  • 避免 showModalDialog 弹出新窗体的原因分析

    避免 showModalDialog 弹出新窗体的原因分析

    避免 showModalDialog 弹出新窗体的原因分析,一般情况下需要返回值用window.open.
    2010-05-05
  • JavaScript禁止页面回退的方法步骤

    JavaScript禁止页面回退的方法步骤

    这篇文章主要为大家介绍了JavaScript禁止页面回退的方法步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • 在JS中判断两个对象是否相等方法详解

    在JS中判断两个对象是否相等方法详解

    在JavaScript中，判断两个对象是否相等有多种方法，取决于你对相等的定义以及对象属性的类型，本文将介绍几种常见的方法，感兴趣的同学可以参考阅读
    2023-05-05
  • BootStrap的Datepicker控件使用心得分享

    BootStrap的Datepicker控件使用心得分享

    bootstrap就非常好用，而且框架布局很漂亮，用起来也很简单。今天小编给大家分享BootStrap的Datepicker控件使用心得，一起看看吧
    2016-05-05
  • 关于微信小程序map组件z-index的层级问题分析

    关于微信小程序map组件z-index的层级问题分析

    这篇文章主要给大家介绍了关于微信小程序map组件z-index的层级问题的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用微信小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • JS实现点击按钮自动增加一个单元格的方法

    JS实现点击按钮自动增加一个单元格的方法

    这篇文章主要介绍了JS实现点击按钮自动增加一个单元格的方法,实例分析了javascript操作表格单元格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-03-03

最新评论