内容 参数
  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. FZU 1683 纪念SlingShot(矩阵水)

    纪念SlingShot [题目链接]纪念SlingShot [题目类型]矩阵水 &题解: 这代码调了十多分钟,结果是Mul没返回值,好zz啊. 令sum(n)=sum(n-1)+f(n) 那么 ...

  2. python入门第二篇

    整体注释:ctrl+? 1.运算符 +  -  *  /   //(取商) **(幂) %(求余) 判断某个东西是否在某个东西里面包含:  in           not in 不等于: <& ...

  3. tp命名空间

    namespace   Home\Controller;  命名空间   根命名空间下的类所在的文件夹use Think\Controller; 使用   根命名空间下的controller类 顶头写 ...

  4. Unity shader学习之阴影，衰减统一处理

    使用unity AutoLight.cginc文件里的内置函数 UNITY_LIGHT_ATTENUATION shader如下: // Upgrade NOTE: replaced 'mul(UNI ...

  5. <<Natural Language Inference over Interaction Space >> 句子匹配

    模型结构 code :https://github.com/YichenGong/Densely-Interactive-Inference-Network 首先是模型图: Embedding Lay ...

  6. 2-2：python之控制结构

    一.程序流程图 1.用规定的一系列图形.流程线和文字说明算法从开始到结束全部步骤,包括基本操作和控制流程.2.流程图的基本元素包括: 1)  表示相应操作的框 2) 带箭头的流程线 3) 框内必要的文 ...

  7. E. Gerald and Giant Chess

    E. Gerald and Giant Chess time limit per test 2 seconds memory limit per test 256 megabytes2015-09-0 ...

  8. E. Bear and Drawing

         E. Bear and Drawing time limit per test 1 second memory limit per test 256 megabytes input stan ...

  9. wingide 远程调试

    1.首先你应该在本地安装wingide 6.1版本 2.大多数电脑.py文件都不能以wingide的形式打开(异常苦逼),无论是从“属性”或者是“设置”里面都不可以,无奈之下只能通过修改注册表的方式进 ...

  10. Presto 学习和使用笔记

    1.presto 表连接查询的连接条件中不支持使用函数 比如下面的脚本在presto中运行会报错 select t1.period_start_date, t2.statistic_date from ...