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

        }

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

            <!--

                所有的列要放到行里

                一行最多有12列，超过12的话，就会另起一行

                -->

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

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

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

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

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

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

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

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

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

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

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

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

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

        </div>

        <hr />

        <div class="row">

            <!--

                一行最多12列

                col-md-4：四列的合并之后的效果

                -->

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

            <div class="col-md-4">col-md-5/6/7/8</div>

            <div class="col-md-4">col-md-9/10/11/12</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基础 栅格系统 1行最多12列的更多相关文章

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

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

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

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

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

      内容 参数   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基础 栅格系统 col-lg/md/sm/xs-* 简单示例

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

  6. Bootstrap3基础 栅格系统 col-md-offset 向右偏移

      内容 参数   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. Bootstrap3 栅格系统-实例：多余的列（column）将另起一行排列

    如果在一个 .row 内包含的列(column)大于12个,包含多余列(column)的元素将作为一个整体单元被另起一行排列. <div class="row"> &l ...

随机推荐

  1. Flask(python)异步（ajax）返回json格式数据

    主要讨论两个问题,第一个是关于json.dumps 与jsonify区别,第二个是几种异步的区别(见jQuery中的$.getJSON.$.ajax.$.get.$.post的区别). json.du ...

  2. 在vue中使用lang="scss"出现报错解决思路

    最近在学习vue框架,使用lang="scss" 出现如下错误: This dependency was not found: * !!vue-style-loader!css-l ...

  3. esp32固件烧录

    正常使用IO0置空即可.烧录时需要en引脚接高电平,IO0接地,使用乐鑫的烧录工具烧录即可.注意如果启用wifi,供电一定要不小于500ma,普通的usb转ttl模块无法满足wifi启动的,被坑的好惨 ...

  4. c++中的auto、const auto&

    先介绍一下auto.const: 在块作用域.命名作用域.循环初始化语句等等  中声明变量时,关键词auto用作类型指定符. const:修饰符 接下来我们细细分析一下: (1)auto auto即 ...

  5. 再次聊一聊promise settimeout asycn awiat执行顺序---js执行机制 EVENT LOOP

    首先js是单线程 分为同步和异步,异步又分为(macrotask 宏任务 和 microtask微任务 ), 这图还是很清晰嘛,再来一张 总结一下,就是遇到同步先执行同步,异步的丢到一边依次排队,先排 ...

  6. 关于sql server profiler 监控工具的使用

    勾选以下属性: 记录这个数据库访问磁盘的次数:

  7. Python3.0科学计算学习之绘图（四）

    绘制三维图: mplot3d工具包提供了点.线.等值线.曲面和所有其他基本组件以及三维旋转缩放的三维绘图. 1.散点的三维数据图 from mpl_toolkits.mplot3d import ax ...

  8. 初学Python(二)

    -----------------------------------------------------2019.3.5-00:59--------------------------------- ...

  9. git stash pop 冲突，git stash list 中的记录不会自动删除的解决方法

    在使用git stash代码时,经常会碰到有冲突的情况,一旦出现冲突的话,系统会认为你的stash没有结束. 导致的结果是git stash list 中的列表依然存在,实际上代码已经pop出来了. ...

  10. IT题库-134 | String、StringBuffer和StringBuilder的区别

    String是不可变的: StringBuffer是可变的,有默认长度的缓冲区,缓冲区一出时,则会自动增加: StringBuilder也是可变的,同上: StringBuffer是线程安全的(方法实 ...