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

随机推荐

第七周 ip通信基础回顾
H3C的配置指令包括:基本配置,查看指令,接口配置. 基本配置包括:查看可用指令:进入系统视图,全局配置模式:给设备命名:退回上一层模式:直接退回到用户模式. 查看指令包括:显示设备系统版本信息:显示 ...
rand和srand的用法
首先我们要对rand&srand有个总体的看法:srand初始化随机种子,rand产生随机数,下面将详细说明. rand(产生随机数)表头文件: #include<stdlib.h> ...
洛谷P4778 Counting swaps 数论
正解:数论解题报告: 传送门! 首先考虑最终的状态是固定的,所以可以知道初始状态的每个数要去哪个地方,就可以考虑给每个数$a$连一条边,指向一个数$b$,表示$a$最后要移至$b$所在的位置显然每 ...
redis 3.2 新数据结构：quicklist、String的embstr与raw编码方式分界点
Redis3.2.0引入了新的quicklist的数据结构做了list的底层存储方案.废弃了原来的两个配置参数, list-max-ziplist-entries list-max-ziplist-v ...
git使用：本地分支merge到远程分支
背景:为了更加规范维护自动化测试工程,代码提交流程最近更新了,先拉分支到本地修改,完成后同步到远程分支. 前置条件 (1)本地机器可通过ssh与gitlab服务器通信 (2)gitlab上的测试项目中 ...
python3 编码解码
字符换算比特(bit) 计算机最小的存储单位字节(byte) 1 bit = 1 位 8 bit = 1 byte 1024 bytes = 1 kb 1024 kb = 1 mb 1024 mb ...
Median
#include <stdio.h> #include <stdlib.h> #include <math.h> #define MAXSIZE 1000 int ...
POJ 1159 Palindrome(最长公共子序列)
Palindrome [题目链接]Palindrome [题目类型]最长公共子序列 &题解: 你做的操作只能是插入字符,但是你要使最后palindrome,插入了之后就相当于抵消了,所以就和在 ...
Aliyun OSS Nginx proxy module（阿里云OSS Nginx 签名代理模块）
1.此文章主要介绍内容本文主要介绍如何利用Nginx lua 实现将阿里云OSS存储空间做到同本地磁盘一样使用.核心是利用Nginx lua 对OSS请求进行签名并利用内部跳转将所有访问本地Ngin ...
C# 读取xml——XmlReader和XElement
1.有些xml文件头部有DTD,程序解析的时候会报错如:其他信息: 打开外部 DTD“file:///E:/PM数据/MeContext=CDF2775/MeasDataCollection.dtd ...

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

code

result

reference

resource

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

随机推荐

热门专题

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

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