Bootstrap3基础栅格系统 col-md-push/pull 向左、右的浮动偏移

内容	参数
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">

    <style type="text/css">

        div[class*="col-"] {

            border: 1px solid red;

        }

    </style>

    <!-- 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 style="background-color:gray;">

    <!-- start : demo -->

    <div class="container" style="background-color:white;">

        <!-- 建立坐标系 -->

        <div class="row">

            <div class="col-md-1">1</div>

            <div class="col-md-1">2</div>

            <div class="col-md-1">3</div>

            <div class="col-md-1">4</div>

            <div class="col-md-1">5</div>

            <div class="col-md-1">6</div>

            <div class="col-md-1">7</div>

            <div class="col-md-1">8</div>

            <div class="col-md-1">9</div>

            <div class="col-md-1">10</div>

            <div class="col-md-1">11</div>

            <div class="col-md-1">12</div>

        </div>

        <div class="row">

            <div class="col-md-5">5</div>

            <div class="col-md-7">7</div>

        </div>

        <!-- 开始演示啦 -->

        <!-- pull 向左偏移

             push 向右偏移

          -->

        <div class="row">

            <div class="col-md-5 col-md-push-1" style="border:1px solid blue;">5</div>

            <div class="col-md-7 col-md-pull-2">7</div>

        </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

reference

https://blog.csdn.net/supergao222/article/details/78625220

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基础栅格系统 col-md-push/pull 向左、右的浮动偏移的更多相关文章

Bootstrap3基础栅格系统 col-lg/md/sm/xs-* 简单示例
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统标尺(col-lg/md/sm/xs-1)
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统页面布局随浏览器大小的变化而变化
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统列中有行，行中有列
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统 col-md-offset 向右偏移
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统 1行最多12列
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...
bootstrap3之栅格系统
原理栅格系统的核心就是媒体查询.指定的尺寸都是百分比,也就是流式布局. 查看bootstrap中的源码可以发现,对样式的定义次序全都是依次 xs.sm.md.lg,如: // grid-framew ...
MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统
文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

随机推荐

Mock Server 实现post方法的接口（三）
Mock Server 实现post方法的接口(三) 1.mock server实现的接口,当request中未设置"method"时,会自动将所有method试一次,所以一定要指 ...
Elasticsearch学习笔记（九）partial update
一.什么是partial update? PUT /index/type/id,创建文档&替换文档,就是一样的语法一般对应到应用程序中,每次的执行流程基本是这样的: (1)应用程序先发起一个 ...
多个.txt文件合并到一个.txt文件中
如果想要将多个.txt文件合并到一个.txt文件中,可以先将所有.txt文件放到一个文件夹中,然后使用.bat文件完成任务. 例如,在一个文件夹下有1.txt, 2.txt, 3.txt三个文件,想把 ...
chrome通过devtools来查看Devtools Extension与浏览器内核实际通信的数据情况
1.chrome通过devtools来查看Devtools Extension与浏览器内核实际通信的数据情况,步骤如下: (1)开启开发者工具实验模式 ---浏览器进入chrome://flags - ...
极客时间深入拆解java虚拟机一至三讲学习总结
为什么要学习java虚拟机 1.学习java虚拟机的本质,是了解java程序是如何被执行且优化的.这样一来,才可以从内部入手,达到高效编程的目的.与此同时,你也可以为学习更深层级.更为核心的java技 ...
关于PL/SQL Developer与Oracle客户端
这是一个很简单的知识点,但这些年遇到过太多初学者反而受其困扰,所以还是决定记录一下. 背景:国内使用Oracle的群体,几乎都会使用PL/SQL Developer这个图形化的工具进行日常数据维护.这 ...
windows----------火狐浏览器访问所有https网站都显示链接不安全解决办法
1.如有以下情况,点右边的“高级”,看看自己的错误码是否为SEC_ERROR_UNKNOWN_ISSUER 2.在地址栏键入"about:config" 点击“我了解此风险” 3. ...
StrictRedis
StrictRedis对象⽅法通过init创建对象,指定参数host.port与指定的服务器和端⼝连接,host默认为localhost,port默认为6379,db默认为0 sr = Strict ...
Cpython解释器GIL-多线程执行流程
YEP_fpssynchoption
帧率调节插件 ============================================================================Introduction===== ...

Bootstrap3基础 栅格系统 col-md-push/pull 向左、右的浮动偏移

code

result

reference

resource

Bootstrap3基础 栅格系统 col-md-push/pull 向左、右的浮动偏移的更多相关文章

随机推荐

热门专题

Bootstrap3基础栅格系统 col-md-push/pull 向左、右的浮动偏移

Bootstrap3基础栅格系统 col-md-push/pull 向左、右的浮动偏移的更多相关文章