这是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. 使用kvm虚拟出Centos6.5系统相关步骤

    使用kvm虚拟出Centos6.5系统相关步骤 kvm是啥东西,亲们自行百度哇,一两句话也说不清楚,直接进主题使用宿主机虚拟出一台centos6.5的系统,当然其他系统也可以的,考虑到企业常用服务器系 ...

  2. ecshop Admin后台商品列表处（上架、下架、精品...取消精品）增加操作

    相关文件:goods.php,goods_list.htm 思路: a.增添连接“转移仓库” b.在goods.php,读取仓库列表数据,并且实例化 c. 在goods_list.htm循环数据.点击 ...

  3. echosp 销量排行 新增实际价格

    找到lib_goods.php第147行,代码 $sql = 'SELECT g.goods_id, g.goods_name, g.shop_price,g.goods_thumb, SUM(og. ...

  4. Python之路【第十二篇】前端之js&dome&jQuery

    JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚本是通过嵌入在HTML中来实现 ...

  5. javascript模块简单写法

    写法1: (function (wd, doc) { var mw = {}; mw.noConflict = noConflict; var _$ = wd.$; wd.$ = mw; functi ...

  6. PPTP（Point to Point Tunneling Protocol），即点对点隧道协议。

    PPTP PPTP(Point to Point Tunneling Protocol),即点对点隧道协议.该协议是在PPP协议的基础上开发的一种新的增强型安全协议,支持多协议虚拟专用网(VPN),可 ...

  7. linux安装软件通常会做哪些事

    一般来说,安装某个包,某个服务,某个软件时,可能会做以下事情(不一定全部) - 在安装目录: /usr/bin, /usr/lib: /usr/you_specified_bin/, /usr/you ...

  8. ExtJS + fileuploadfield上传文件代码

    后台服务端接收文件的代码: /** * 后台上传文件处理Action */ @RequestMapping(value = "/uploadFile", method=Reques ...

  9. .NET逻辑分层架构总结

    一.基础知识准备: 1.层的原则: (1)每一层以接口方式供上层调用. (2)上层只能调用下层. (3)依赖分为松散交互和严格交互两种. 2.业务逻辑分类: (1)应用逻辑. (2)领域逻辑. 3.采 ...

  10. 终端改变host的类型,还原