内容 参数
  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. laravel学习历程

    1.www目录下拉下来一个laravel框架 composer create-project laravel/laravel laravelapp --prefer-dist laravelapp 为 ...

  2. hive javaapi 002

    默认开启10000端口开启前,编辑hive-site.xml设置impersonation,防止hdfs权限问题,这样hive server会以提交用户的身份去执行语句,如果设置为false,则会以起 ...

  3. JSP—连接池

    1:为什么要使用连接池? 解决频繁连接释放造成的资源浪费 2:配置好的数据库连接池也是以数据源DateSource的形式存, 连接池的实现类负责建立与数据库的连接. 3:使用连接池关闭资源的区别? 使 ...

  4. 【Hive学习之五】Hive 参数&动态分区&分桶

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 apache-hive-3.1.1 ...

  5. Qt & VS2013 报错：There's no Qt version assigned to this project for platform Win32

    如果你想了解关于Qt与VS2013开发环境搭建,可以至此翻页. 这里主要分享环境已搭建成功,在构建项目时遇到的报错解决方案. [1]Qt 与 VS2013开发环境构建时报错 报错界面如下: 注意:对话 ...

  6. Jersey入门——对Json的支持

    Jersey rest接口对POJO的支持如下: package com.coshaho.learn.jersey; import java.net.URI; import javax.ws.rs.C ...

  7. SQL优化(转)

    1. 负向条件查询不能使用索引 select * from order where status!=0 and stauts!=1 not in/not exists都不是好习惯 可以优化为in查询: ...

  8. 阿里云自定义镜像可以免费保存,ECS实例到期后自定义镜像手动快照不会被删除

    阿里云自定义镜像可以免费保存,ECS实例到期后自定义镜像手动快照不会被删除 4. ECS 实例释放后,自定义镜像是否还存在? 存在. 5. ECS 实例释放后,快照是否还存在? 保留手动快照,清除自动 ...

  9. JustOj 2040: 王胖子买零食 （贪心）

    题目描述 大豪哥有个好朋友叫王胖子,众所周知王胖子特别爱吃零食,比如各种不一样的糖果,辣条呀,可是王胖子每个月用在买零食上的钱不是固定的,但是因为王胖子特别爱吃零食,他希望把自己能花在买吃的钱全部用掉 ...

  10. [转载]oracle 数据类型详解---日期型

    1.常用日期型数据类型1.1.DATE这是ORACLE最常用的日期类型,它可以保存日期和时间,常用日期处理都可以采用这种类型.DATE表示的日期范围可以是公元前4712年1月1日至公元9999年12月 ...