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

随机推荐

LDAP与实现
LDAP是什么? LDAP是轻量目录访问协议,英文全称是Lightweight Directory Access Protocol,一般都简称为LDAP.它是基于X.500标准的,但是简单多了并且可以 ...
Libvmi实现分析
LibVMI是一个专注于读写虚拟机内存的自省库,它能够监视虚拟机底层的运行细节并将其还原.LibVMI支持对Xen及KVM虚拟化平台上的运行虚拟机进行自省操作,针对KVM虚拟化平台,LibVMI对QE ...
导出CityGML
通过代码实现了导出CityGML功能
2019春第六周作业Compile Summarize
这个作业属于那个课程 C语言程序设计II 这个作业要求在哪里在这里我在这个课程的目标是能够熟练掌握指针的用法这个作业在那个具体方面帮助我实现目标对指针的使用更加得心应手参考文献与网址 C语 ...
python 数组中数字求和是否为零
需求是: 给定一个不少于4个元素的list(4个元素不重复): 请确认是否存在这样的4个元素,使得四数之和为0?如果有打印出符合条件的四个元素,如果没有打印False #!/usr/bin/pytho ...
office word memo
显示左侧目录树 office 和 wps 的差异 wps 的版本:视窗 ->文档结构图 office 的版本: 视图 ->导航窗格
Unity 属性雷达图
using System.Collections.Generic; using UnityEngine; [RequireComponent(typeof(MeshFilter),typeof(Mes ...
主线程 RunLoop 学习笔记
以下为主RunLoop 的输出,能够看到不同的source0,source1,observer ---------------------------------- CFRunLoop{wakeup ...
旧调重弹Hibernate与Ibatis区别——深入架构设计
对于一个粗学者而言一言概况就是:ibatis非常简单易学,hibernate相对较复杂,门槛较高. 但是,hibernate对数据库结构提供了较为完整的封装,hibernate的o/r mappin ...
(转)MERGE语法详解
merge语法是根据源表对目标表进行匹配查询,匹配成功时更新,不成功时插入. 其基本语法规则是 merge into 目标表 a using 源表 b on(a.条件字段1=b.条件字段1 and a ...

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

code

result

reference

resource

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

随机推荐

热门专题

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

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