这是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. ios 消息转发初探

    有时候服务器的接口文档上一个数据写的是string类型,这时候你就会直接把它赋值给一个label. 问题来了,有时候这个string的确是string,没有问题,有时候又是NSNumber,当然不管三 ...

  2. HTML5基本特性和新功能

    HTML5的基本特征 1.向前兼容性 核心理念——平滑过渡! 不支持html5的浏览器可以向前兼容,并不会影响web内容的显示! 2.跨平台运行性 从pc浏览器到手机.平板电脑,甚至是智能电视. 只要 ...

  3. Linq 中按照多个值进行分组(GroupBy)

    Linq 中按照多个值进行分组(GroupBy) .GroupBy(x => new { x.Age, x.Sex }) group emp by new { emp.Age, emp.Sex ...

  4. WebGrid with filtering, paging and sorting 【转】

    WebGrid with filtering, paging and sorting by Jose M. Aguilar on April 24, 2012 in Web Development A ...

  5. spring InitializingBean接口

    最近工作需要得到sping中的每个事物需要执行的sql,称机会简单研究了一下spring的事务,项目中管理事务比较简单,用TransactionTemplate,就直接以TransactionTemp ...

  6. java在继承中父类的成员变量是否会被子类所覆盖

    假如 父类 int num =7:子类 int num =9:父类是否会被子类所覆盖? 给你看两个例子: 第一个例子: 第二个例子: 这两个例子的区别只有一句话   由此证明了子类从父类继承的时候   ...

  7. Xcode常用技巧(2)-使Xcode在创建类时自动添加前缀

    在Xcode5之前的版本中,Xcode在新建项目时,会要求为一个类指定一个前缀,这样方便我们区分相同名字的类.而从Xcode6开始,由于Swift增加了命名空间的关系,Xcode在新建项目时,不会再要 ...

  8. jquery 选择器 -高级使用 新的 心得

    jQuery的each函数: each函数等同于c语言中的for函数: 里面每次循环的 "context 上下文" == 当前的dom ,可以使用this, 也可以使用$(this ...

  9. nginx禁止ip直接访问

    编辑一个noIp.conf放到虚拟目录中 server { listen default; server_name _; rewrite ^ http://www.xxxx.com/; } 其中 ww ...

  10. PHP利用Curl实现多线程抓取网页和下载文件

    PHP 利用 Curl  可以完成各种传送文件操作,比如模拟浏览器发送GET,POST请求等等,然而因为php语言本身不支持多线程,所以开发爬虫程序效率并不高,一般采集 数据可以利用 PHPquery ...