内容 参数
  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-3">1</div>

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

        </div>

        <!-- 当偏移的数量，一行装不下时。它会另起一行。。。-->

        <div class="row">

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

            <div class="col-md-3 col-md-offset-7">2</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

 

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-offset 向右偏移的更多相关文章

  1. Bootstrap3基础 栅格系统 col-lg/md/sm/xs-* 简单示例

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. Bootstrap3基础 栅格系统 标尺(col-lg/md/sm/xs-1)

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  3. Bootstrap3基础 栅格系统 页面布局随 浏览器大小的变化而变化

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

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

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  5. Bootstrap3基础 栅格系统 列中有行，行中有列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. Bootstrap3基础 栅格系统 1行最多12列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  7. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  8. bootstrap3之栅格系统

    原理 栅格系统的核心就是媒体查询.指定的尺寸都是百分比,也就是流式布局. 查看bootstrap中的源码可以发现,对样式的定义次序全都是依次 xs.sm.md.lg,如: // grid-framew ...

  9. MVC5 + EF6 + Bootstrap3 (7) Bootstrap的栅格系统

    文章来源: Slark.NET-博客园http://www.cnblogs.com/slark/p/mvc5-ef6-bs3-get-started-grid.html 上一节:ASP.NET MVC ...

随机推荐

  1. 线性表->链式存储->双向链表

    文字描述 之前的链表(单链表.循环链表)的链式存储结构中只有一个指示直接后继的指针域.由此,从某个结点出发只能顺指针往后寻查其他结点.若要寻查结点的直接前驱,则需从表头指针出发.即单链表中,NextE ...

  2. 2018-2019-2 网络对抗技术 20165225 Exp4 恶意代码分析

    2018-2019-2 网络对抗技术 20165225 Exp4 恶意代码分析 实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或Exp ...

  3. wrapper induction随笔

    本文是一篇介绍Wrapper Induction的阅读笔记,原文详见<Wrapper induction:Efficiency and expressiveness>. Wrapper I ...

  4. CAS单点登录入门

    一.单点登录简介 SOO是现在企业比较流行的业务整合解决方案之一,定义解决登录,可以应用在不同系统中,用户只需要登录一次,就可以访问所有相互信任的应用系统(模块开发.同家公司不同产品等等),例如百度, ...

  5. com.alibaba.druid.pool.DruidDataSource : {dataSource-2} init error

    这几天准备写一个项目,其中的整合druid的时候,发现出现了下面这个错误.找了好久都没有找到.网上的各种解决方法都不对. 2018-11-07 16:26:28.940 INFO 19684 --- ...

  6. [转]GO 开发rest api 接口

    注明出处:https://blog.csdn.net/haowenqi008/article/details/79150705 最近在研究Go,打算基于Go做点Web API,于是经过初步调研,打算用 ...

  7. 两个ArrayList之间求交并补

    class ArraylistCalculate{ // 两个整数集求差集 public ArrayList<Integer> integerArrayListDifference( Ar ...

  8. 2018-2019-2 《网络对抗技术》Kali安装 Week1 20165236

    2018-2019-2 <网络对抗技术>Kali安装 Week1 20165236 一.kali 下载 安装 网络 共享 软件源 二.安装步骤 1.官网上下载kali Linux: 2.参 ...

  9. 实现hibernate 的validator校验

    Validator校验分为快速校验和全校验.快速校验是当遇到第一个参数不符合条件时,立即停止校验程序,将校验不通过的信息返回到前端:全校验是将前端传过来的参数全部进行校验,将所有不通过校验的信息一起返 ...

  10. Cocos Creator（圆形遮罩头像）动态增加遮盖层 mask 并设为圆形生效

    var avatar = new cc.Node('avatar'); var sp = node.addComponent(cc.Sprite); sp.spriteFrame = new cc.S ...