Bootstrap3基础栅格系统标尺(col-lg/md/sm/xs-1)

内容	参数
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)的更多相关文章

Bootstrap3基础栅格系统 col-lg/md/sm/xs-* 简单示例
内容参数 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基础栅格系统列中有行，行中有列
内容参数 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基础栅格系统 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的栅格布 ...

随机推荐

Elasticsearch学习笔记（七）document小结
一.生成document id 1.自动生成document id 自动生成的id,长度为20个字符,URL安全,base64编码,GUID,分布式系统并行生成时不可能 ...
Redis的数据结构之Set
存储Set 和List类型不同的是,Set集合中不允许出现重复的元素 Set可包含的最大元素数量是4294967295 存储set常用命令: 添加/删除元素获取集合中的元素集合中的差集运算集合中 ...
【转】mysql保存图片技术决定：保存二进制文件还是只保存图片相对路径，图片放在硬盘上面?
最近遇到上面这个问题,一开始我就果断否决了数据库保存图片的策略,主要是太蠢!事实上我的决定是正确的,我仅仅理解为mysql读写性能提高的境界,具体为什么可以提高?很模糊,知道我看到了这里: 大佬做的实 ...
基于Spark自动扩展scikit-learn (spark-sklearn)（转载）
转载自:https://blog.csdn.net/sunbow0/article/details/50848719 1.基于Spark自动扩展scikit-learn(spark-sklearn)1 ...
request.getParameterNames()和request.getParameterValues()
request.getParameterNames()方法是将发送请求页面中form表单里所有具有name属性的表单对象获取(包括button).返回一个Enumeration类型的枚举. 通过Enu ...
兼容不同浏览器的CSS前缀-webkit-，-ms-，-moz-，-o-
笔者在工作实践中发现当需要CSS兼容不同的浏览器时,需要在CSS样式前加上不同的前缀,从而使其他浏览器也能够达到相同的页面效果. 那么我们怎么去加上这些前缀呢?我们一起带着疑问来进行学习: 1.前缀分 ...
JAVA判断是否是手机设备访问
package com.common.util; import java.util.regex.Matcher;import java.util.regex.Pattern; /** * 检测是否为移 ...
Java-接口(interface)
1.1接口的定义 java中接口是一系列方法的声明,是一些方法特征的集合,一个接口只有方法的特征没有方法的实现,因此这些方法可以在不同的地方被不同的类实现,而这些实现可以具有不同的行为(功能). 接口 ...
ZIP压缩指定路径
using Common; using Newtonsoft.Json; using Newtonsoft.Json.Linq; using Quartz; using Quartz.Impl; us ...
装PIL库
pip install Pillow -i http://mirrors.aliyun.com/pypi/simple/ --trusted-host mirrors.aliyun.com

Bootstrap3基础 栅格系统 标尺(col-lg/md/sm/xs-1)