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 都各安方位，列是列。

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

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

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

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

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

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

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

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&period;0 栅格系统背后的精妙魔法(Bootstrap3&period;0的栅格布局系统实现原理)
这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

随机推荐

批处理bat 命令
1.批处理常用符号: - echo 打开回显或关闭请求回显功能,或显示消息.如果没有任何参数,echo 命令将显示当前回显设置语法:@echo [{ on|off }] echo{"显示 ...
使用Servlet和JSP实现一个简单的Web聊天室系统
1 问题描述利用Java EE相关技术实现一个简单的Web聊天室系统,具体要求如下. (1)编写一个登录 ...
js中的eval()和catch()
定义和用法 eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码. 语法 eval(string) 参数描述 string 必需.要计算的字符串,其中含有要计算的 Java ...
BestCoder Round &num;60 题解链接
题解题目 1001 GT and sequence 注意先特判000的情况:如果读入的数据有000,那么去掉所有的000且最后答案和000取一个max. 剩下的正数显然全部乘起来比较优. 对于负数 ...
【viewResolver】 springmvc jsp
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver"> &lt ...
隐私：网民最常用密码MD5解密
国内知名网络安全商瑞星公司曾发布过一项针对密码强度的专业研究报告,这项研究中列举了中国网民和美国网民最常用的密码集.研究表明,全球互联网大部分用户在密码使用中都存在着种种疏漏,一些极其简单的密码被广泛 ...
NOI2014题解
起床困难综合症(BZOJ 3668) 送分题,直接从高位向低位贪心. 魔法森林(BZOJ 3669) 一个容易想到的办法就是枚举A的最大值,以B作为权值求最小生成树.暴力的话要T的.如果从小到大枚举A ...
Java Web整合开发(附录1) - 安装配置环境
1. Install JDK http://blog.csdn.net/sonnet123/article/details/9169741 Download JDK http://www.oracle ...
webrtc学习笔记2（Android端demo代码结构）
最近正在修改webrtc的Android端demo和服务器交互的内容,介绍一下demo的大体结构吧,以便能快速回忆. 环境:Android5.0以上.libjingle_peerconnection_ ...
入坑第二式 golang入坑系统
史前必读: 这是入坑系列的第二式,如果错过了第一式,可以去gitbook( https://andy-zhangtao.gitbooks.io/golang/content/ )点个回放,看个重播.因 ...

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