内容 参数
  OS   Windows 10 x64
  browser   Firefox 65.0.2
  framework     Bootstrap 3.3.7
  editor   Visual Studio Code 1.32.1  
  typesetting   Markdown

 

code

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <!-- IE将使用最新的引擎渲染网页 -->

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- 页面的宽度与设备屏幕的宽度一致

         初始缩放比例 1:1 -->

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Demo</title>

    <meta name="author" content="www.cnblogs.com/kemingli">

    <!-- 引入外部bootstrap的css文件(压缩版)，版本是3.3.7 -->

    <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->

    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->

    <!--[if lt IE 9]>

        <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>

        <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>

    <![endif]-->

</head>

<body>

    <!-- start : demo -->

    <div class="container">

        <div>

            <ul class="pagination">

                <li><a href="#">«</a></li>

                <li class="active"><a href="#">猕猴桃</a></li><!-- 设个默认为第一页 -->

                <li><a href="#">橙</a></li>

                <li><a href="#">柚</a></li>

                <li><a href="#">西瓜</a></li>

                <li><a href="#">甜瓜</a></li>

                <li><a href="#">莲薏</a></li>

                <li><a href="#">»</a></li>

            </ul>

        </div>

    </div>

    <!-- end : demo -->

    <!-- NO.1 加载框架依赖的jQuery文件(压缩版)，版本是1.12.4 -->

    <script src="bootstrap/js/jquery.min.js"></script>

    <!-- NO.2 加载Bootstrap的所有JS插件，版本是3.3.7 -->

    <script src="bootstrap/js/bootstrap.min.js"></script>

</body>

</html>

 

result

 

resource

  • [ 文档 ] getbootstrap.com/docs/3.3
  • [ 源码 ] github.com/twbs/bootstrap
  • [ 源码 ] archive.mozilla.org/pub/firefox/releases/65.0/source/
  • [ 平台 ] www.cnblogs.com
  • [ 平台 ] github.com
  • [ 扩展 - 平台] www.bootcss.com
  • [ 扩展 - 浏览器 ] www.mozilla.org/zh-CN/firefox/developer

 

Bootstrap是前端开源框架，优秀，值得学习。

博文讲述的是V3版本，更为先进的是V4版本。学有余力的话，可作简单地了解。

Firefox是开源的浏览器，优秀，值得关注。

面对开源框架，分析、领悟与应用，能对其进行加减裁化，随心所欲而不逾矩。

博文的质量普通，仅供参考。盲目复制，处处是坑。Think twice before you act(三思而后行)！

Bootstrap3基础 pagination 分页按钮 简单示例的更多相关文章

  1. Bootstrap3基础 navbar 导航条 简单示例

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. Bootstrap3基础 btn-xs/sm... 按钮的四种大小

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  3. Python3基础 生成器推导式 简单示例

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  4. C# 驱动的mongodb的分页查询简单示例

    /// <summary> /// mongodb分页查询 /// </summary> /// <typeparam name="T">< ...

  5. Python3基础 内嵌函数 简单示例

    镇场诗: 诚听如来语,顿舍世间名与利.愿做地藏徒,广演是经阎浮提. 愿尽吾所学,成就一良心博客.愿诸后来人,重现智慧清净体.-------------------------------------- ...

  6. DB2分页查询简单示例

    select * from ( select a.* ,rownumber() over(order by create_time desc) as rowid from ( select * fro ...

  7. EasyUI基础入门之Pagination(分页)

    前言 对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了.对于类似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了.恰巧EasyUI就提供了分页组 ...

  8. angular实现简单的pagination分页组件

    不想使用第三方库,只想使用一个分页器,那么就简单的实现一个,效果如下: 1.使用方式: <custom-pagination *ngIf="enterpriseList.length& ...

  9. 仿淘宝分页按钮效果简单美观易使用的JS分页控件

    分页按钮思想:  1.少于9页,全部显示  2.大于9页,1.2页显示,中间页码当前页为中心,前后各留两个页码  附件中有完整例子的压缩包下载.已更新到最新版本  先看效果图:  01输入框焦点效果  ...

随机推荐

  1. 21Oracle数据库和实例

    Oracle数据库:相关的操作系统文件(即储存在计算机硬盘上的文件)的集合,这些文件组织在一起,成为一个逻辑整体,即为Oracle数据库.物理存在 Oracle实例:位于物理内存里的数据结构,它由操作 ...

  2. java中的锁之AbstractQueuedSynchronizer源码分析（二）

    一.成员变量. 1.目录. 2.state.该变量标记为volatile,说明该变量是对所有线程可见的.作用在于每个线程改变该值,都会马上让其他线程可见,在CAS(可见锁概念与锁优化)的时候是必不可少 ...

  3. 面向对象的多态性(C++)

    以C++为例三大特效:封装.继承.多态,面向对象的编程语言都具有这些特性. 那么本节来谈谈多态性,尽量说的简单些容易理解! 多态什么意思?即运行时多态,以相同的方式处理不同类型的对象,产生不同的结果! ...

  4. uva 1416 Warfare And Logistics

    题意: 给出一个无向图,定义这个无向图的花费是 其中path(i,j),是i到j的最短路. 去掉其中一条边之后,花费为c’,问c’ – c的最大值,输出c和c’. 思路: 枚举每条边,每次把这条边去掉 ...

  5. First Wainberg-2018-Deep learning in biomedicine Experience

    ppt+paper 链接:https://pan.baidu.com/s/14toqjcSJti5ZXT3ff4rwIA 提取码:xgkt

  6. flask模板应用-空白控制

    模板应用实践 空白控制 在实际输出的HTML文件中,模板中的jinja2语句.表达式和注释会保留移除后的空行. 例如下面的代码: {% set user.age = 23 %} {% if urer. ...

  7. LINUX安装REDIS集群

    linux安装单机版redis已经在另一篇文章说过了,下边来搞集群,环境是新浪云服务器: redis3.0以后开始支持集群. 前言:redis用什么做集群? 用一个叫redis-trib.rb的rub ...

  8. I2S接口介绍

    I2S接口介绍一.I2S协议介绍 I2S协议作为音频数据传输协议,由Philips制定.该协议由三条数据线组成:1.SCLK:串行时钟,频率= 2 * 采样频率 * 采样位数.2.WS:字段(声道)选 ...

  9. vue中组件通信之父子通信：props（组件传参）

    实例一: <div id="app"> <alert msg="hhhhhhh"></alert> </div> ...

  10. JustOj 1927: 回文串

    题目描述 回文串是从左到右或者从右到左读起来都一样的字符串,试编程判别一个字符串是否为回文串. 输入 输入一个字符串.串长度<255. 输出 判别输入的字符串是否为回文串,是输出"Y& ...