内容 参数
  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 class="row">

            <div class="col-md-8">

                <!-- 列中嵌套行 -->

                <div class="row">

                    <div class="col-md-1">

                        8-1

                    </div>

                    <div class="col-md-3">

                        8-3

                    </div>

                    <div class="col-md-4">

                        8-4

                    </div>

                </div>

            </div>

            <div class="col-md-4">

                &nbsp;

            </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

 

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基础 栅格系统 列中有行，行中有列的更多相关文章

  1. Bootstrap3基础 栅格系统 1行最多12列

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  2. Bootstrap3基础 栅格系统 页面布局随 浏览器大小的变化而变化

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

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

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  4. Bootstrap3基础 栅格系统 col-md-offset 向右偏移

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

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

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  6. Bootstrap3基础 栅格系统 col-md-push/pull 向左、右的浮动偏移

      内容 参数   OS   Windows 10 x64   browser   Firefox 65.0.2   framework     Bootstrap 3.3.7   editor    ...

  7. Bootstrap3.0 栅格系统背后的精妙魔法(Bootstrap3.0的栅格布局系统实现原理)

    这个标题取的有点奇怪,怪我翻译的有问题吧.英文学平有限,有道词典和google翻译齐上阵是必须的.还好翻译的不是小说,对于技术文章,还是能勉强翻过来的. 本文主要讲解了Bootstrap3.0的栅格布 ...

  8. sql中的行转列和列转行的问题

    sql中的行转列和列转行的问题 这是一个常见的问题,也是一个考的问题 1.行转列的问题  简单实例 CREATE TABLE #T ( MON1 INT, MON2 INT, MON3 INT ) G ...

  9. sqlserver 行转列、字符串行转列、自动生产行转列脚本

    行转列,老生常谈的问题.这里总结一下网上的方法. 1.生成测试数据: CREATE TABLE human( name ), --姓名 norm ), --指标 score INT , --分数 gr ...

随机推荐

  1. CF1033G Chip Game

    题意 给你一个长度为\(n\)的序列和一个数\(m\). 小A和小B分别在\([1,m]\)选出一个数\(a\)和\(b\),然后开始游戏. 轮到小A时,他选择一个元素减\(a\):小B则选择一个元素 ...

  2. 小白用阿里云搭载wordpress个人博客

    阿里云服务已经购买多时,却一直没时间部署内容,借着这次机会自己照着博客园园友的方式用wordpress搭建了个人博客! 创建wordpress的内容就不多说了,直接附链接来源:https://www. ...

  3. （2.1）mysql升级与降级

    (2.1)mysql升级与降级 转自:深入浅出mysql数据库开发.优化与管理第二版 1.mysql升级 2.mysql降级

  4. ADB——adb devices unauthorized

    我们只有在手机打开USB调试,并且允许电脑对其进行调试的前提下才可以用ADB进行自动化操作手机,如果出现unauthorized提示的话就是说明手机没有允许电脑对其调试 这个时候通常手机回弹出允许调试 ...

  5. pwn学习日记Day3 基础知识积累

    知识杂项 msfVENOM:Msfvenom是msf框架配套的攻击载荷生成器. payload:有效载荷. payload:目标系统上渗透成功后执行的代码. Metasploit:一款开源的安全漏洞检 ...

  6. JavaScript 判断当前设备是否是移动端还是PC

    if(navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i)){ alert('移动端')}else { alert('PC端') }

  7. 中国省市区json数据 三级联动

    <label> <span>购买地址</span> <select name="PurchaseProvince" style=" ...

  8. C++——简单数据类型及布尔类型

    一. 简单数据类型 数据类型描述了对象在内存存储区中占据的空间大小,描述了对象能够表示的数据范围 和类型.C++语言中常用的数据类型有整型.实型.字符型(这3种类型也被称之为简单数 据类型).数组类型 ...

  9. mvc partialView+kendo window

    在写mvc项目时,一个列表查询页面含有多个操作按钮及弹框操作.原本写在了一个view中,导致代码繁多复杂,难以维护,还有表单赋值清空.验证等麻烦. 因此改用kendo window +partialV ...

  10. CentOS 7 Squid代理服务器正向代理-透明代理

    Squid是Linux系统中最常用的一款开源代理服务软件,主要提供缓存加速和应用层过滤控制的功能,可以很好的实现HTTP.FTP.DNS查询以及SSL等应用的缓存代理 透明代理:提供与传统代理相同的功 ...