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

随机推荐

2018-2019-2 20165317《网络对抗技术》Exp1 PC平台逆向破解
2018-2019-2 20165317<网络对抗技术>Exp1 PC平台逆向破解实验目的掌握NOP, JNE, JE, JMP, CMP汇编指令的机器码 NOP:无作用,英文&quo ...
k8s-No.3-pod进阶
本章目录 pod环境变量env pod的资源限制resources pod的健康检查-探针 pod的imagepullsecrets 一 pod-env 环境变量就是系统或者程序运行时的预定义的参 ...
转载：Android RecyclerView 使用完全解析体验艺术般的控件
转自:https://blog.csdn.net/lmj623565791/article/details/45059587
2017(2)数据库设计，数据库设计过程，ER模型，规范化理论
试题二(共 25 分〉阅读以下关于系统数据分析与建模的叙述,在答题纸上回答问题1 至问题 3. [说明] 某软件公司受快递公司委托,拟开发一套快递业务综合管理系统,实现快递单和物流信息的综合管理.项 ...
rpc轻量级框架实例
Windows —— cmd命令
Windows —— cmd命令 cd 命令进入cmd的默认目录:默认为 C:\Users\Administrator> 进入文件夹:cd 文件夹名返回上一层目录:cd.. 切换目录: 清屏 ...
reduce函数
python中的reduce python中的reduce内建函数是一个二元操作函数,他用来将一个数据集合(链表,元组等)中的所有数据进行下列操作:用传给reduce中的函数 func()(必须是 ...
python-soap接口请求
一.环境准备方法一: >pip3 install suds >pip3 install suds-jurko 因在线安装报错,所以直接下载安装包. 方法二: 1.suds库下载地址:ht ...
关于表情的战争APP隐私政策网址
本软件尊重并保护所有使用服务用户的个人隐私权.为了给您提供更准确.更有个性化的服务,本软件会按照本隐私权政策的规定使用和披露您的个人信息.但本软件将以高度的勤勉.审慎义务对待这些信息.除本隐私权政策另 ...
linux将apache设置为系统服务和开机自启
1> 查看一下/etc/init.d/下是否存在httpd这个服务 ls /etc/init.d/ | grep httpd 如果没有执行下一步 2>将自己安装目录下的apachect1复 ...

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