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

        }

        .row {

            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>

    <!-- start : demo -->

    <div class="container">

        <div class="row">

            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">1</div>

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

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

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

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

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

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

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

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

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

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

            <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">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

 

more knowledge

  • 在使用bootstrap开发网页时，这套标尺帮了很多的忙。
  • 在浏览器宽度为385px左右时，col-xs-1出现了堆叠现象。效果如下图所示：

原本设想的是12个格会在同一行中，但是现在它们出现了堆叠。有待解决。(2019-03-16)

 

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-lg/md/sm/xs-1)的更多相关文章

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

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

  2. boostrap中lg,md,sm,xs

    boostrap中lg,md,sm,xs分别表示多少px? .col-xs- 超小屏幕 手机 (<768px).col-sm- 小屏幕 平板 (≥768px).col-md- 中等屏幕 桌面显示 ...

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

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

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

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

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

      内容 参数   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基础 栅格系统 1行最多12列

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

  8. boostrap中lg,md,sm,xs分别对应的像素宽度

    col-xs-   超小屏幕 手机 (<768px)col-sm-  小屏幕 平板 (≥768px)col-md-  中等屏幕 桌面显示器 (≥992px)col-lg-    大屏幕 大桌面显 ...

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

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

随机推荐

  1. 博客搬家 https://hanwang945.github.io/

    博客搬家 https://hanwang945.github.io/

  2. java并发请求多个接口，顺序返回

    最近有个需求,从一个api拿数据,但是api时间参数又有范围限制,因此需要自己将时间分成多段,多次请求api,并且最终返回的数据需要保持原有的顺序 代码如下: package com.test001. ...

  3. EM(Expectation Maximization )

    概括 看李航老师的<统计学习方法>知道,EM是一个对于有隐含随机变量的概率模型的参数的估计方法,它是一种无监督的算法. 只是有些重要的点并没有给出, 比如没有三硬币例子中直接给出的 u(z ...

  4. UISplitViewController使用

    分割控制器UISplitViewController <1>功能:它也是ipad的一个新特性,在屏幕上可以同时显示两个控制器,左边一个,右边一个:左边的为主控制器,右边的为详细控制器,主控 ...

  5. 使用commons.cli实现MyCP

    目录 Commons.cli库 MyCP 测试代码 总结 Commons.cli库 考虑到这次的任务是实现自己的命令行命令cp,我认为简单地使用args[]无法很好的完成需求.经过网上的一番搜索,我找 ...

  6. c++ 程序崩溃生成Dump文件

    #include "Windows.h"#include "DbgHelp.h" int GenerateMiniDump(PEXCEPTION_POINTER ...

  7. hadoop启动namenode日志报这个错，首先说怎么看日志

    hadoop启动namenode日志报这个错,首先说怎么看日志, 启动namenode会有这个,ubuntu: starting namenode, logging to /home/xiaoye/h ...

  8. python 练习1（流控制）

    #!/usr/bin/python #_*_ coding:utf-8 _*_ #练习题 #1.使用while循环输入 1 2 3 4 5 6 8 9 10 #a.定义一个变量存放数字 #b.用whi ...

  9. 单点登录（SSO）详解

    背景 在企业发展初期,企业使用的系统很少,通常一个或者两个,每个系统都有自己的登录模块,运营人员每天用自己的账号登录,很方便.但随着企业的发展,用到的系统随之增多,运营人员在操作不同的系统时,需要多次 ...

  10. log4j２ 标签解析

    根节点Configuration有两个属性:status和monitorinterval,有两个子节点:Appenders和Loggers. status用来指定log4j本身的打印日志的级别. mo ...