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

        .container {

            border: 1px solid black;

        }

        div[class*="col-lg-"] {

            background-color: aqua;

            border: 1px solid black;

            height: 30px;

        }

        div[class*="col-md-"] {

            background-color: coral;

            border: 1px solid black;

            height: 30px;

        }

        div[class*="col-sm-"] {

            background-color: darkseagreen;

            border: 1px solid black;

            height: 30px;

        }

        div[class*="col-xs-"] {

            background-color: lightblue;

            border: 1px solid black;

            height: 30px;

        }

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

            <!--

                大于1200px，相互配合排成一行

                小于1200px，分别占一行

                -->

            <div class="col-lg-4">col-lg-4</div>

            <div class="col-lg-4">col-lg-4</div>

            <div class="col-lg-4">col-lg-4</div>

        </div>

        <br />

        <div class="row">

            <!--

                大于992px，相互配合排成一行

                小于992px，分别占一行

                -->

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

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

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

        </div>

        <br />

        <div class="row">

            <!--

                大于768px，相互配合排成一行

                小于768px，分别占一行

                -->

            <div class="col-sm-3">col-sm-3</div>

            <div class="col-sm-5">col-sm-5</div>

            <div class="col-sm-4">col-sm-4</div>

        </div>

        <br />

        <div class="row">

            <!--

                始终排列成一行

                -->

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

            <div class="col-xs-9">col-xs-11</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

浏览器宽度最大时， lg/md/sm/xs 都各安方位，列是列。

缩小浏览器的宽度，当小于1200px时，lg 的列变成一行。

缩小浏览器的宽度，当小于992px时，md 的列变成一行。

缩小浏览器的宽度，当小于768px时，sm 的列变成一行。

 

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. Bootstrap3基础 栅格系统 标尺(col-lg/md/sm/xs-1)

      内容 参数   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基础 栅格系统 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基础 栅格系统 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

    前言 最近有好几位同学直接微信赞助说快点更新文章.这个要和大家说声抱歉,的确很久没有写文章了.我们也不找借口,我会尽力保证多写文章.今天我们的主题来讲解 如何给自己的网站 加上HTTPS HTTPS是 ...

  2. eolinker使用初体验（一）

    1.官网 https://www.eolinker.com 2.安装测试增强插件,由于chrome安装的时候有问题,建议移步firefox浏览器,不纠结.. 3.新建一个单例测试

  3. [ionic3.x开发记录]ios下页面过渡效果不出现的小坑

    如果内容没有被<ion-content></ion-content>或者<ion-header></ion-header>标签包裹,页面过渡的时候是没有 ...

  4. lucene基础

    同一个域中,即使相同的单词,如出现两次JAVA,也是不同的token,但他们对应相同的term,在term中记录这些token信息 数据库数据,与luence数据 需要搜寻(也即索引)的field,存 ...

  5. DAX/PowerBI系列 - 关于时间系列 - 时间相关数值比较 - 用非自带函数

    DAX/PowerBI系列 - 关于时间系列 - 时间相关数值比较 - 用非自带函数 文末有彩蛋,解决蛋疼问题 难度: ★★☆☆☆(2星) 适用范围: ★★★☆☆(3星) 概况: 基于时间的汇总可能是 ...

  6. 【Nginx】-NO.141.Nginx.1 -【Nginx】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  7. PHP防CC攻击代码

    PHP防CC攻击代码: empty($_SERVER['HTTP_VIA']) or exit('Access Denied'); //代理IP直接退出 session_start(); $secon ...

  8. JDK丨WIN10配置JDK1.8 （解决javac不是内部或外部命令，也不是可运行的程序或批处理文件）

    1.下载JDK,安装. 2.配置JDK. (右键我的电脑 - 属性 - 高级系统设置 - 环境变量.) 2.1 添加系统变量JAVA_HOME 变量名:JAVA_HOME 变量值:C:\Program ...

  9. python编写接口初识一

    python编写接口这里用到的是他一个比较轻量级的框架 flask #!/usr/bin/python # -*- coding: UTF-8 -*- import flask,json server ...

  10. 感觉不错的随笔 关于C、C++的

    [effective C++的网页版] http://www.kuqin.com/effectivec2e/ 内存四区模型 https://www.cnblogs.com/crazyzhang/p/5 ...