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

内容	参数
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-* 简单示例的更多相关文章

Bootstrap3基础栅格系统标尺(col-lg/md/sm/xs-1)
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
boostrap中lg,md,sm,xs
boostrap中lg,md,sm,xs分别表示多少px? .col-xs- 超小屏幕手机 (<768px).col-sm- 小屏幕平板 (≥768px).col-md- 中等屏幕桌面显示 ...
Bootstrap3基础栅格系统页面布局随浏览器大小的变化而变化
内容参数 OS Windows 10 x64 browser Firefox 65.0.2 framework Bootstrap 3.3.7 editor ...
Bootstrap3基础栅格系统 col-md-push/pull 向左、右的浮动偏移
内容参数 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 ...
boostrap中lg,md,sm,xs分别对应的像素宽度
col-xs- 超小屏幕手机 (<768px)col-sm- 小屏幕平板 (≥768px)col-md- 中等屏幕桌面显示器 (≥992px)col-lg- 大屏幕大桌面显 ...
Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

随机推荐

关于parseInt()里的一些小坑
parseInt(string,radix)方法是将输入字符串转化为数值,两个输入参数中string为要转化的字符串,radix可省略,是浏览器以几进制来解读输入的string. 举几个例子就能够对该 ...
JVM深入：JVM内存堆布局图解分析（转）
转载自:https://www.cnblogs.com/SaraMoring/p/5713732.html 原文:http://www.codeceo.com/article/jvm-memory-s ...
JS正则练习集
基础练习: //连续3个数字 var pattern1 = /\d{3}/g; console.log(pattern1.test('s23')); // false console.log(patt ...
软件测试第二次作业：初识JUNIT单元测试方法
软件测试有很多分类,从测试的方法上可分为:黑盒测试.白盒测试.静态测试.动态测试从软件开发的过程分为:单元测试.集成测试.确认测试.验收.回归等. 在众多的分类中,与开发人员关系最紧密的莫过于单 ...
cocos creator 重写源码按钮Button点击音频封装
(function(){ var Super = function(){}; Super.prototype = cc.Button.prototype; //实例化原型 Super.prototyp ...
js优化前端小白适用
注意啦,前端初学者适合看的js优化,当你看我的优化认为太low,那么恭喜,你已经脱离初学者了. 首先这边我觉得分享的还是以js为主,前端性能优化,我认为最重要的还是js,因为js是一门解释型的语言,相 ...
Data type
先放官方文档: https://dev.mysql.com/doc/refman/5.5/en/data-types.html MySQL支持多种类型的SQL数据类型:数字类型,日期和时间类型,字符串 ...
1.1大数据平台架构及Hadoop生态圈
1.硬件架构实例 2.软件架构实例 3.数据流通用概念模型 a.数据源(互联网.物联网.企业数据):App.Device.Site b.数据收集(ETL.提取.转换.加载):Flume.Kafka.S ...
2017 6 2php用PDO链接数据库前测试
try { $dsn = "mysql:dbname=test;host=127.0.0.1";//链接mysql的DSN(数据库驱动) $user = 'root';//Mysq ...
Fiddler抓包【5】_Fiddler过滤
1.User Fiters启用 2.Action Action:Run Filterset now是否运行,Load Filterset加载,Save Filterset保存: 3.Hosts过滤 Z ...

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