Bootstrap网格系统（Grid System）

　　响应式网格系统随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

1

1

1

1

1

1

1

1

1

1

1

1

4

4

4

4

8

6

6

12

工作原理

　　· 行必须放置在 .container class 内，以便获得适当的对齐（alignment）和内边距（padding）。

　　· 使用行来创建列的水平组。

　　· 内容应该放置在列内，且唯有列可以是行的直接子元素。

　　· 预定义的网格类，比如 .row 和 .col-xs-4，可用于快速创建网格布局。LESS 混合类可用于更多语义布局。

　　· 列通过内边距（padding）来创建列内容之间的间隙。该内边距是通过 .rows 上的外边距（margin）取负，表示第一列和最后一列的行偏移。

　　· 网格系统是通过指定您想要横跨的十二个可用的列来创建的。例如，要创建三个相等的列，则使用三个 .col-xs-4。

媒体查询

/* 超小设备（手机，小于 768px） */

/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */

@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */

@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */

@media (min-width: @screen-lg-min) { ... }

跨设备工作

 

超小设备手机（<768px）

小型设备平板电脑（≥768px）

中型设备台式电脑（≥992px）

大型设备台式电脑（≥1200px）

网格行为

一直是水平的

以折叠开始，断点以上是水平的

以折叠开始，断点以上是水平的

以折叠开始，断点以上是水平的

最大容器宽度

None (auto)

750px

970px

1170px

Class 前缀

.col-xs-

.col-sm-

.col-md-

.col-lg-

列数量和

12

12

12

12

最大列宽

Auto

60px

78px

95px

间隙宽度

30px
（一个列的每边分别 15px）

30px
（一个列的每边分别 15px）

30px
（一个列的每边分别 15px）

30px
（一个列的每边分别 15px）

可嵌套

Yes

Yes

Yes

Yes

偏移量

Yes

Yes

Yes

Yes

列排序

Yes

Yes

Yes

Yes

网格的基本结构

<div class="container">

   <div class="row">

      <div class="col-*-*"></div>

      <div class="col-*-*"></div>      

   </div>

   <div class="row">...</div>

</div>

<div class="container">....

 

示例一：水平堆叠

　　代码如下：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 堆叠的水平</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-6"  style=" box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

         </p>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

            quae ab illo inventore veritatis et quasi architecto beatae vitae

            dicta sunt explicabo.

         </p>

      </div>

      <div class="col-md-6" style="box-shadow:

         inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

         </p>

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

         </p>

   </div>

</div>

</body>

</html>

　　效果：

　　确保单元的总数为12以保障显示效果比较和谐。超过12就串行了。如果单个行的单元数超过12呢：

　　如上图所示，单个行的单元数超过12会失去内边距。

示例二：中型和大型设备

　　睡得晚起得早还多梦，也是没治了。

　　中型设备是50%/50%，大型设备是33%/66%，那么可以这样写：

<div class="col-md-6 col-lg-4">....</div>

<div class="col-md-6 col-lg-8">....</div>

　　源码如下：

<!DOCTYPE html>

<html>

<head>

   <title>Bootstrap 实例 - 中型和大型设备</title>

   <link href="/bootstrap/css/bootstrap.min.css" rel="stylesheet">

   <script src="/scripts/jquery.min.js"></script>

   <script src="/bootstrap/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <div class="col-md-6 col-lg-4"  style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

         </p>

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium, totam rem aperiam, eaque ipsa

            quae ab illo inventore veritatis et quasi architecto beatae vitae

            dicta sunt explicabo.

         </p>

      </div>

      <div class="col-md-6 col-lg-8" style="

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem

            accusantium doloremque laudantium.

         </p>

         <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,

            consectetur, adipisci velit, sed quia non numquam eius modi

            tempora incidunt ut labore et dolore magnam aliquam quaerat

            voluptatem.

         </p>

   </div>

</div>

</body>

</html>

　　若如此，中型设备的显示是50%/50%：

　　大型设备的显示是33%/66%：

　　同理移动设备也可进行类似设置：

<div class="col-sm-3 col-md-6 col-lg-4">....</div>

<div class="col-sm-9 col-md-6 col-lg-8">....</div>

　　源码及效果略。

响应式的列重置

　　小设备时无法确定网格显示的位置。

　　解决方法是添加一个响应式的块（描述未必准确），使用.clearfix class和响应式实用工具：

<div class="container">

    <div class="row" >

        <div class="col-xs-6 col-sm-3"

            style="

            box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

        </div>

        <div class="col-xs-6 col-sm-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim veniam, quis nostrud exercitation ullamco laboris

            nisi ut aliquip ex ea commodo consequat.

            </p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut.

            </p>

        </div>

        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3"

        style="

        box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco

            laboris nisi ut aliquip ex ea commodo consequat.

            </p>

        </div>

        <div class="col-xs-6 col-sm-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do

            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut

            enim ad minim

            </p>

        </div>

    </div>

</div>

　　解释一下中间这句：

<div class="clearfix visible-xs"></div>

　　响应式实用工具目前适用于块和表切换。看下面两个表格就知道了。

 

超小屏幕
手机 (<768px)

小屏幕
平板 (≥768px)

中等屏幕
桌面 (≥992px)

大屏幕
桌面 (≥1200px)

.visible-xs-*

可见

隐藏

隐藏

隐藏

.visible-sm-*

隐藏

可见

隐藏

隐藏

.visible-md-*

隐藏

隐藏

可见

隐藏

.visible-lg-*

隐藏

隐藏

隐藏

可见

.hidden-xs

隐藏

可见

可见

可见

.hidden-sm

可见

隐藏

可见

可见

.hidden-md

可见

可见

隐藏

可见

.hidden-lg

可见

可见

可见

隐藏

类组

CSS display

.visible-*-block

display: block;

.visible-*-inline

display: inline;

.visible-*-inline-block

display: inline-block;

实例三：响应式实用工具

　　源码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>Bootstrap 实例 - 响应式实用工具</title>

    <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

<body>

<div class="container" style="padding: 40px;">

    <div class="row visible-on">

        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <span class="hidden-xs">特别小型</span>

            <span class="visible-xs">✔ 在特别小型设备上可见</span>

        </div>

        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <span class="hidden-sm">小型</span>

            <span class="visible-sm">✔ 在小型设备上可见</span>

        </div>

        <div class="clearfix visible-xs"></div>

        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <span class="hidden-md">中型</span>

            <span class="visible-md">✔ 在中型设备上可见</span>

        </div>

        <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;

                                              box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <span class="hidden-lg">大型</span>

            <span class="visible-lg">✔ 在大型设备上可见</span>

        </div>

    </div>

</div>

</body>

</html>

　　效果如下：

　　大型设备时：

　　其他设备略。

偏移列

　　.col-xs=*类不支持偏移，可以通过使用一个空的单元格来实现该效果。

　　使用.col-md-offset-*类可以把一个列的左外边距增加*列，其中*的范围是从1到11。

<div class="container">

    <h1>Hello, world!</h1>

    <div class="row" >

        <div class="col-xs-6 col-md-offset-3"

        style="box-shadow:

        inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing

            elit.

            </p>

        </div>

    </div>

</div>

　　效果：

嵌套列

　　嵌套需要添加一个新的.row，然后在这个嵌套的.row里添加一组.col-md-*列。这组列的个数不能超过12。

<div class="container">

    <h1>Hello, world!</h1>

    <div class="row">

        <div class="col-md-3" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第一列</h4>

            <p>

                Lorem ipsum dolor sit amet, consectetur adipisicing elit.

            </p>

        </div>

        <div class="col-md-9" style="box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

            <h4>第二列 - 分为四个盒子</h4>

            <div class="row">

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Consectetur art party Tonx culpa semiotics. Pinterest

        assumenda minim organic quis.

                    </p>

                </div>

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                         sed do eiusmod tempor incididunt ut labore et dolore magna

        aliqua. Ut enim ad minim veniam, quis nostrud exercitation

        ullamco laboris nisi ut aliquip ex ea commodo consequat.

                    </p>

                </div>

            </div>

            <div class="row">

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        quis nostrud exercitation ullamco laboris nisi ut

        aliquip ex ea commodo consequat.

                    </p>

                </div>

                <div class="col-md-6" style=" box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

                    <p>

                        Lorem ipsum dolor sit amet, consectetur adipisicing elit,

        sed do eiusmod tempor incididunt ut labore et dolore magna

        aliqua. Ut enim ad minim.

                    </p>

                </div>

            </div>

        </div>

    </div>

</div>

　　效果：

列排序

　　有一点像定位。.col-md-push-*相当于left；.col-md-pull-*类似于right。其中*的范围是从1到11。标签在后面的层级高一些。

<div class="container">

   <h1>Hello, world!</h1>

   <div class="row">

      <p>排序前</p>

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

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在左边

      </div>

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

         box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;">

         我在右边

      </div>

   </div><br>

   <div class="row">

      <p>排序后</p>

      <div class="col-md-4 col-md-push-1"

         style="

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在左边

      </div>

      <div class="col-md-8 col-md-pull-2"

         style="

         box-shadow: inset 1px -1px 1px #444,

         inset -1px 1px 1px #444;">

         我在右边

      </div>

   </div>

</div>

　　效果：

　　参考：http://www.runoob.com/bootstrap/bootstrap-grid-system.html

bootstrap入门-3.响应式原理的更多相关文章

  1. Vue源码--解读vue响应式原理

    原文链接:https://geniuspeng.github.io/2018/01/05/vue-reactivity/ Vue的官方说明里有深入响应式原理这一节.在此官方也提到过: 当你把一个普通的 ...

  2. 详解Vue响应式原理

    摘要: 搞懂Vue响应式原理! 作者:浪里行舟 原文:深入浅出Vue响应式原理 Fundebug经授权转载,版权归原作者所有. 前言 Vue 最独特的特性之一,是其非侵入性的响应式系统.数据模型仅仅是 ...

  3. Bootstrap<基础十> 响应式实用工具

    Bootstrap 提供了一些辅助类,以便更快地实现对移动设备友好的开发.这些可以通过媒体查询结合大型.小型和中型设备,实现内容对设备的显示和隐藏. 需要谨慎使用这些工具,避免在同一个站点创建完全不同 ...

  4. Vue.js学习 Item12 – 内部响应式原理探究

    深入响应式原理 大部分的基础内容我们已经讲到了,现在讲点底层内容.Vue.js 最显著的一个功能是响应系统 —— 模型只是普通对象,修改它则更新视图.这让状态管理非常简单且直观,不过理解它的原理也很重 ...

  5. Vue.js响应式原理

      写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址:answershuto/learnV ...

  6. Bootstrap 实战之响应式个人博客 （二）

    阅读本博文前请参考:Bootstrap 实战之响应式个人博客 (一) 一.博客 1.结构 整体博客详情页的结构共包括四部分: 导航栏 博客主体内容 右侧栏:全局搜索框,广告位,推荐阅读 页尾 其中导航 ...

  7. Bootstrap 实战之响应式个人博客 （一）

    一.示例 1.主页 2.博客详情页 3.在线地址 在线地址:入口 Addition:这里使用github-page将自己的静态项目免费部署到线上. 如果你只是做一些简单的静态项目做展示,付出这么大的时 ...

  8. vue.js响应式原理解析与实现

    vue.js响应式原理解析与实现 从很久之前就已经接触过了angularjs了,当时就已经了解到,angularjs是通过脏检查来实现数据监测以及页面更新渲染.之后,再接触了vue.js,当时也一度很 ...

  9. 深入浅出Vue基于“依赖收集”的响应式原理（转）

    add by zhj: 文章写的很通俗易懂,明白了Object.defineProperty的用法 原文:https://zhuanlan.zhihu.com/p/29318017 每当问到VueJS ...

随机推荐

  1. 某个 UIView的dealloc方法不执行

    一,可能情况: 1> timer 没有清楚 2> 循环引用 3> block引用了实例变量. 二,查找到结果竟是 1> 没有使用 property 创建的属性,默认是强引用,会 ...

  2. tomcat 设置根目录访问

    from http://nj-apple-tree.iteye.com/blog/1635953 1,设置跟路径时,三种方式 在Tomcat默认安装后,tomcat的主目录是webapps/root目 ...

  3. HDU2045/*HDU2604/*HDU2501/HDU2190 递推

    不容易系列之(3)-- LELE的RPG难题 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/O ...

  4. event事件学习小节

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML静态网页 css样式表

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  6. log4net 添加自定义日志到数据库

    添加操作日志到数据库举例: (一)建立数据库的操作日志表,如下我建立了一个简单的日志表 (二)配置文件中的配置如下 <log4net> <!--错误日志记录数据库--> < ...

  7. Lua修改文件名

    local lfs = require "lfs"local curPath = "..\\new\\"local  totalFile = 0 local s ...

  8. java AES 加密与解密

    package com.ss.util.secret;   import java.io.UnsupportedEncodingException; import java.security.Inva ...

  9. java之浮点数（笔记）

    1.在计算机中,浮点数并不同等于小数. public static void main(String[] args) { double b1 = 0.1; double b2 = 0.2; doubl ...

  10. sphinx网址

    http://www.phperz.com/article/14/0615/95.htmlhttp://www.kuqin.com/shuoit/20141101/342963.htmlhttp:// ...