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的栅格布 ...

随机推荐

2018-2019-2 网络对抗技术 20165336 Exp4 恶意代码分析
2018-2019-2 网络对抗技术 20165336 Exp4 恶意代码分析 1.实践目标 1.1是监控你自己系统的运行状态,看有没有可疑的程序在运行. 1.2是分析一个恶意软件,就分析Exp2或E ...
Spark入门到精通--（第七节）环境搭建（服务器搭建）
Spark搭建集群比较繁琐,需要的内容比较多,这里主要从Centos.Hadoop.Hive.ZooKeeper.kafka的服务器环境搭建开始讲.其中Centos的搭建不具体说了,主要讲下集群的配置 ...
git 远程
git remote add origin [远程仓库地址]
剑指offer-扑克牌顺子
题目描述 LL今天心情特别好,因为他去买了一副扑克牌,发现里面居然有2个大王,2个小王(一副牌原本是54张^_^)...他随机从中抽出了5张牌,想测测自己的手气,看看能不能抽到顺子,如果抽到的话,他决 ...
ASM检查RAC是否成功
[grid@asm ~]$ crsctl status resourceNAME=ora.DATA.dgTYPE=ora.diskgroup.typeTARGET=ONLINESTATE=ONLINE ...
service order
1: SRVO Service Order compress: 本地部署,客户能够看到后台代码,transaction type,改代码等. SVO1 Service Order ...
xtrabackup工具备份与恢复
1.xtrabackup简介 Xtrabackup是一个对InnoDB做数据备份的工具,支持在线热备份(备份时不影响数据读写),是商业备份工具InnoDB Hotbackup的一个很好的替代品.它能对 ...
centos7.2 Apache+PHP7.2+Mysql5.6环境搭建
yum安装PHP7.2 由于linux的yum源不存在php7.x,所以我们要更改yum源:rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-re ...
Java基础（运算符）
Java中的运算符: 算术运算符:+ - * / % ++ -- %运算符叫取模:它就是取余的例如:43%7=1 其他的都是和数学里的运算符一样(不过在字符串中如果是两个字符串 ...
前端JS插件整理
1.JQuery.js JavaScript 库,简化JS. 官网地址:https://jquery.com/ 菜鸟教程:http://www.runoob.com/jquery/jquery-tut ...

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