内容 参数
  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;

        }

    </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 style="background-color:gray;">

    <!-- start : demo -->

    <div class="container" style="background-color:white;">

        <div class="row">

            <!--

                                        结合下面的代码可以计算出

                md:中等屏幕大小 PC      一行三列

                xs:小的屏幕大小 手机    一行一列

                sm:平板电脑             一行两列

                这个就成响应式啦，布局会随着屏幕大小的变化而变化

                可以通过改变浏览器的大小而查看效果

                -->

            <div class="col-md-4 col-xs-12 col-sm-6">

                <img src="images/fh.jpg" class="img-responsive img-thumbnail" />

                <h1 class="page-header">凤凰</h1>

                <p>

                    凤凰，亦作“凤皇”，古代传说中的百鸟之王。

                    雄的叫“凤”，雌的叫“凰”，总称为凤凰，亦称为丹鸟、火鸟、鶤鸡、威凤等。

                    常用来象征祥瑞，凤凰齐飞，是吉祥和谐的象征，自古就是中国文化的重要元素。

                </p>

            </div>

            <div class="col-md-4 col-xs-12 col-sm-6">

                <img src="images/fh.jpg" class="img-responsive img-thumbnail" />

                <h1 class="page-header">凤凰</h1>

                <p>

                    凤凰，亦作“凤皇”，古代传说中的百鸟之王。

                    雄的叫“凤”，雌的叫“凰”，总称为凤凰，亦称为丹鸟、火鸟、鶤鸡、威凤等。

                    常用来象征祥瑞，凤凰齐飞，是吉祥和谐的象征，自古就是中国文化的重要元素。

                </p>

            </div>

            <div class="col-md-4 col-xs-12 col-sm-6">

                <img src="images/fh.jpg" class="img-responsive img-thumbnail" />

                <h1 class="page-header">凤凰</h1>

                <p>

                    凤凰，亦作“凤皇”，古代传说中的百鸟之王。

                    雄的叫“凤”，雌的叫“凰”，总称为凤凰，亦称为丹鸟、火鸟、鶤鸡、威凤等。

                    常用来象征祥瑞，凤凰齐飞，是吉祥和谐的象征，自古就是中国文化的重要元素。

                </p>

            </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基础 栅格系统 标尺(col-lg/md/sm/xs-1)

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

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

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

  3. Bootstrap3基础 栅格系统 列中有行，行中有列

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

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

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

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

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

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

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

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

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

  8. BootStrap3栅格系统与布局

    栅格系统与布局 Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks t ...

  9. 深入理解BootStrap之栅格系统（布局）

    1.栅格系统(布局) Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列. 我在这里是把Bootstrap中的栅 ...

随机推荐

  1. 添加新网络模型后运行报错：未定义的参数：ps_roipooling param

    现象描述:在新增了具有自定义的data层或者loss层的网路之后,工程运行会报错: 疑惑:并没有这样的参数新增,并且前向的deploy文件已经将自定义的loss以及data等都去掉了: 可能的原因:虽 ...

  2. 使用vue+elementUI+springboot创建基础后台增删改查的管理页面--(1)

    目前这家公司前端用的是vue框架,由于在之前的公司很少涉及到前端内容,对其的了解也只是会使用js和jquery,所以..慢慢来吧. 在此之前需要先了解vue的大致语法和规则,可先前往官方文档进行学习h ...

  3. Mysql集群原理

    一. 主从复制概述  在实际生产中,数据的重要性不言而喻,提供安全可靠的数据保障是技术与运维部门的职责所在:如果我们的数据库只有一台服务器,那么很容易产生单点故障的问题,比如这台服务器访问压力过大而没 ...

  4. 【LeetCode每天一题】Rotate List(旋转链表)

    Given a linked list, rotate the list to the right by k places, where k is non-negative. Example 1: I ...

  5. LeetCode-7-反转数组-c#

    目前看到的网上的版本 都是用到数组的反转函数.对于代码实现的细节没给出 反转函数的想法没给出. 特在此补充. Reverse函数是从c#库源码中抠出的主要部分代码.主要是双端步进.交换,当然是o(1) ...

  6. 在C#中，Windows Console控制台 设置控制台标题、禁用关闭按钮、关闭快速编辑模式、插入模式

    设置控制台标题 禁用关闭按钮 关闭快速编辑模式 关闭插入模式 设置控制台标题.禁用关闭按钮 #region 设置控制台标题 禁用关闭按钮 [DllImport("user32.dll&quo ...

  7. Ubuntu 16.04 安装 Apache, MySQL, PHP7.2

    先更新系统 sudo apt update 安装PHP 通过修改PPA源的方式来安装 sudo apt-get install software-properties-common python-so ...

  8. windows 下安装weblogic

    下载weblogic安装文件 https://www.oracle.com/technetwork/middleware/weblogic/downloads/index.html 在目录下, 下载后 ...

  9. ELK简单安装

    ELK日志分析平台 一.ELK介绍 ELK是三个开源软件的缩写,分别为:Elasticsearch . Logstash以及Kibana,都是开源软件,新增一个beats,(轻量级日志处理工具Agen ...

  10. delphi 判断端口(Port)是否被占用（转载）

    function IsPortUsed(aPort: Integer): Boolean; var _vSock: TSocket; _vWSAData: TWSAData; _vAddrIn: TS ...