目前暂时实现效果，容后面整理心得，先贴上源代码。

源码

<!DOCTYPE html>

<html>

<head>

    <title>demo bootstrap</title>

    <link rel="stylesheet" type="text/css" href="dist/css/bootstrap.css">

    <!-- <script type="text/javascript" src="dist/js/bootstrap.js"></script> -->

    <style type="text/css">

    .my-container {

        padding-right: 15px;

        padding-left: 15px;

        margin-right: auto;

        margin-left: auto;

    }

    @media (min-width: 768px) {

        .my-container {

            width: 750px;

        }

    }

    @media (min-width: 992px) {

        .my-container {

            width: 970px;

        }

    }

    @media (min-width: 1200px) {

        .my-container {

            width: 1170px;

        }

    }

    /*用于清除网格浮动造成的影响*/

    .my-row:before,

    .my-row:after {

        display: table;

        content: " ";

    }

    .my-row:after {

        clear: both;

    }

    .my-row {

        margin-right: -15px;

        margin-left: -15px;

    }

    .my-col-lg-4,

    .my-col-md-6,

    .my-xs-12 {

        position: relative;

        min-height: 1px;

        padding-right: 15px;

        padding-left: 15px;

        /*----*/

        float: left;

    }

    @media (min-width:768px) {

        .my-xs-12 {

            width: 100%;

        }

        .my-col-xs-12:after {

            display: block;

            content: 'after my-col-xs-12 min-width: 768px';

            color: red

        }

        .my-col-xs-12:before {

            display: block;

            content: 'before my-col-xs-12 min-width: 768px';

            color: red

        }

    }

    @media (min-width: 992px) {

        .my-col-md-6 {

            width: 50%;

        }

        .my-col-md-6:after {

            display: block;

            content: 'after col-md-6 min-width: 992px';

            color: red

        }

        .my-col-md-6:before {

            display: block;

            content: 'before col-md-6 min-width: 992px';

            color: red

        }

    }

    @media (min-width: 1200px) {

        .my-col-lg-4 {

            width: 33.3333333%;

        }

        .my-col-lg-4:after {

            display: block;

            content: 'after col-lg-4 min-width: 1200px';

            color: yellow

        }

        .my-col-lg-4:before {

            display: block;

            content: 'before col-lg-4 min-width: 1200px';

            color: yellow

        }

    }

    </style>

</head>

<body style="background-color: #eee">

    <div class="container" style="background-color: #aaa;padding: 15px;">

        <div class="row" style="background-color: #bbb;padding: 15px;">

            <div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div>

            <div class="col-lg-4 col-md-6" style="height: 300px;background-color: #fff"></div>

            <div class="col-lg-4 col-md-6" style="height: 300px;background-color: #000"></div>

        </div>

    </div>

    <div class="my-container" style="background-color: #aaa;padding: 15px;">

        <div class="my-row" style="background-color: #bbb;padding: 15px;">

            <div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000">X</div>

            <div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #fff"></div>

            <div class="my-col-lg-4 my-col-md-6 my-xs-12" style="height: 300px;background-color: #000"></div>

        </div>

    </div>

</body>

</html>

效果图：

width>1200px:

width:1200-992px:

width:0-768px:

笔记

@media (min-width: 768px){ //>=768的设备 }

@media (min-width: 992px){ //>=992的设备 }

@media (min-width: 1200){ //>=1200的设备 }

@media (max-width: 1199){ //<=1199的设备 }

@media (max-width: 991px){ //<=991的设备 }

@media (max-width: 767px){ //<=768的设备 }

参考文献

　　[1] CSS3 响应式布局： @media (min/max-width:***) @font-face

CSS进阶之模拟Bootstrap网格布局的更多相关文章

  1. 使用BootStrap网格布局进行一次演示

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

  2. BootStrap网格布局

    如何使用BootStrap样式 BootStrap与其他的开源库类似,直接引用它的css样式文件就可以使用了. <link rel="stylesheet" href=&qu ...

  3. bootstrap 网格布局

    一:基本的网格布局 <div class="container"> <div class="row"> <div class=&q ...

  4. css进阶 01-CSS中的非布局样式

    01-CSS中的非布局样式 #前言 CSS中,有很多非布局样式,这些样式(属性)和与布局无关,包括: 字体.字重.颜色.大小.行高 背景.边框 滚动.换行 装饰性属性(粗体.斜体.下划线)等. 这篇文 ...

  5. 第三篇bootstrap 网格基础

    Bootstrap 提供了一套响应式.移动设备优先的流式网格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 网格系统类似一个表格,有行和列,它必须放置在一个类型设置为c ...

  6. css模拟Bootstrap响应式布局——栅格

    做作业的时候遇见用css模拟Bootstrap的栅格布局,学习了一下.发现这个很有用,用来在不同的平台上得到很好地用户体验,比如Phone.Pad.大屏幕显示器.小屏幕显示器.自己模拟用css写了一下 ...

  7. 不用bootstrap，只用CSS创建网格布局

    本文译自[http://j4n.co/blog/Creating-your-own-css-grid-system],英语好的,可直接查看原网页,不需要FQ. 翻译拿不准的地方会有英文原文,方便大家理 ...

  8. 【CSS进阶】伪元素的妙用2 - 多列均匀布局及title属性效果

    最近无论是工作还是自我学习提升都很忙,面对长篇大论的博文总是心有余而力不足,但又不断的接触学习到零碎的但是很有意义的知识点,很想分享给大家,所以本篇可能会很短. 本篇接我另一篇讲述 CSS 伪元素的文 ...

  9. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

随机推荐

  1. Python 零基础 快速入门 趣味教程 (咪博士 海龟绘图 turtle) 4. 函数

    什么样的程序员才是优秀的程序员?咪博士认为“慵懒”的程序员才是真正优秀的程序员.听起来不合逻辑?真正优秀的程序员知道如何高效地工作,而不是用不止境的加班来完成工作任务.函数便是程序员高效工作的利器之一 ...

  2. iOS开发中@property的属性weak nonatomic strong readonly等

    请看  https://www.cnblogs.com/liubeimeng/p/4244686.html

  3. BZOJ2120&2453数颜色——线段树套平衡树(treap)+set/带修改莫队

    题目描述 墨墨购买了一套N支彩色画笔(其中有些颜色可能相同),摆成一排,你需要回答墨墨的提问.墨墨会像你发布如下指令: 1. Q L R代表询问你从第L支画笔到第R支画笔中共有几种不同颜色的画笔. 2 ...

  4. NodeJs加载站点的所有页面不存在则404

    演示 链接:https://pan.baidu.com/s/1TZ351m3wUWZpq46qGbejjg 密码:ijj5 代码: var http = require("http" ...

  5. A Plug for UNIX POJ - 1087(模板题 没啥好说的。。就用了一个map)

    题意: 几种插头,每一种都只有一个,但有无限个插头转换器,转换器(a,b) 意味着 可以把b转换为a,有几个设备,每个设备对应一种插头,求所不能匹配插头的设备数量 这个题可以用二分图做 , 我用的是最 ...

  6. python的多线程到底有没有用？

    在群里经常听到这样的争执,有人是虚心请教问题,有人就大放厥词因为这个说python辣鸡.而争论的核心无非就是,python的多线程在同一时刻只会有一条线程跑在CPU里面,其他线程都在睡觉.这是真的吗? ...

  7. 自学Linux Shell12.3-case命令

    点击返回 自学Linux命令行与Shell脚本之路 12.3-case命令 有了case命令,就不需要写出所有elif语句来不停的检查同一个变量的值了.case命令会采用列表格式来检查单个变量的多个值 ...

  8. 修复VirtualBox "This kernel requires the following features not present on the CPU: pae Unable to boot – please use a kernel appropriate for your CPU"

    异常处理汇总-开发工具  http://www.cnblogs.com/dunitian/p/4522988.html 修复VirtualBox "This kernel requires ...

  9. [luogu1351][联合权值]

    题目地址 https://www.luogu.org/problemnew/show/P1351 题目描述 无向连通图G 有n 个点,n - 1 条边.点从1 到n 依次编号,编号为 i 的点的权值为 ...

  10. Pentaho BI server 中 CCC table Component 的使用小技巧

    我使用的版本 Pentaho BI Server 5.3.0.0.213 CDE/CDF/CDA/CCC 15.04.16 stable   Q: 如何设置表格中各种提示文字的语言(默认为英语)? C ...