这是Bootstrap中非常基础一张表,但其实有这么容易掌握和理解吗?

(1).对于col-md的div, 默认是垂直排列, 当视口(屏幕或浏览器的宽度)>992px,col-md-1的div块就水平排列了

(2).container的div最大宽度是自适应的,根据屏幕或浏览器的"视口"宽度自动调整的,例如当"视口"宽度>=1200px时,container的div最大宽度是1170px; 当视口>=768px,<=970px container的div最大宽度是750px


(3).当col块水平排列时,每个col块是有最宽宽度的概念, 对于col-md的div,最大列宽大概是81px(我实践测量并不是81px,求解释)

(4).栅格类嵌套

显示效果如下: 在这里 col-xs与 col-md 嵌套使用, 当视口>=992px时, col-md块层水平排列, col-xs不起作用,而当col-xs单独使用,是符合栅格系统基本要求,即一行只能有12个col,  所以,第2行的col-xs块就换行了.

(5).响应式列重置 .clearfix

Bootstrap 3学习笔记 -栅格的更多相关文章

  1. Bootstrap学习笔记-栅格系统

    栅格系统的原理就是在这个界面中这个栅格被分成12个格子,你根据自己的想要的布局就把这个界面分割成你想要的部分就行了.一般如果我们用电脑作为显示器的我们用的样式是col-md 如果你用的显示期变小的情况 ...

  2. Bootstrap 基础学习笔记（一）

    排版 (1)标题 Bootstrap标题样式进行了以下显著的优化重置: 1.重新设置了margin-top和margin-bottom的值,  h1~h3重置后的值都是20px:h4~h6重置后的值都 ...

  3. bootstrap 新手学习笔记 代码整理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  4. Bootstrap 新手学习笔记——布局组件

    1.字形图标: <button type="button" class="btn btn-primary btn-lg" style="font ...

  5. Bootstrap入门学习笔记(只记录了效果)

    基本头文件 <!DOCTYPE html> <html> <head> <title>Bootstrap 实例</title> <me ...

  6. Bootstrap新手学习笔记——css

    Css模块: 1.网格系统: class前缀:.col-xs-*,.col-sm-*,.col-md-*,.col-lg-* <div class="container"&g ...

  7. bootstrap 4 学习笔记

    一.button 颜色类 白色:btn 浅蓝色:btn btn-primary 深蓝色:btn btn-info 绿色:btn btn-success 黄色:btn btn-warning 红色:bt ...

  8. Bootstrap学习笔记博客

    本片博客用于记录之后要用到Bootstrap的学习笔记   概括: Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架.Bootstrap 是基于 HTML.CSS.JAVASC ...

  9. Bootstrap学习笔记系列1-------Bootstrap网格系统

    Bootstrap网格系统 学习笔记 [TOC] 简单网格 先上代码再解释 <!DOCTYPE html> <html> <head> <title>B ...

随机推荐

  1. LaTex 使用 - 配置

    Reference Link: http://www.howtotex.com/howto/installing-latex-on-windows/ MikTeX:http://miktex.org/ ...

  2. JS实现的一个query字符串转Json格式数据的方法

    输入字符串的格式是 a=1&b=2&c=3 $.par2Json = function (string, overwrite) { var obj = {}, pairs = stri ...

  3. 【转】七年IT经验的七个总结

    http://www.unitymanual.com/thread-30000-1-1.html?_dsign=ebe6a043 1.分享第一条经验:“学历代表过去.能力代表现在.学习力代表未来.” ...

  4. vim黏贴代码格式混乱的解决方法

    from:http://blog.csdn.net/commshare/article/details/6215088 感谢牛人的文章.解决了我在vim使用中,很头疼的问题. 在vim新建文件的时候, ...

  5. What is the most common software of data mining? （整理中）

    What is the most common software of data mining? 1 Orange? 2 Weka? 3 Apache mahout? 4 Rapidminer? 5 ...

  6. CF451B Sort the Array 水题

    Codeforces Round #258 (Div. 2) Sort the Array B. Sort the Array time limit per test 1 second memory ...

  7. assign与weak区别(面试)

    weak 比 assign 多了一个功能就是当属性所指向的对象消失的时候(也就是内存引用计数为0)会自动赋值为 nil ,这样再向 weak 修饰的属性发送消息就不会导致野指针操作crash. 可能不 ...

  8. C#4.0 特性

    动态绑定 命名和可选参数 泛型的协变和逆变 互操作性 动态支持 Office 可编程性 类型等效性支持 协变和逆变 当类型为dynamic的视图模型遭遇匿名对象 https://msdn.micros ...

  9. eclipse tomcat debug启动慢

    myeclipse或eclipse下debug模式启动很慢,默认模式也是debug,网上找了终于解决, 原因是有eclipse或myeclipse启动debug时自动添加断点,所以必须删除一些东西. ...

  10. Hdu.1325.Is It A Tree?(并查集）

    Is It A Tree? Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...