这是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. ecshop 网站标题不更新或内容不更新

    网站标题不更新,这种情况一般出在网站搬家的过程中,把以前的所有配置文件一起都搬到新的服务器上了. 网站状态: 后台店铺标题已经修改,前台不显示,数据shop_config 的shop_title能更新 ...

  2. RHEL提示RHN没有注册问题的解决方法

    1.系统RHEL5.5,初次使用yum时出现以下问题: [root@localhost real]# yum update Loaded plugins: rhnplugin, security Th ...

  3. C#:String.Format数字格式化输出

    int a = 12345678; //格式为sring输出//   Label1.Text = string.Format("asdfadsf{0}adsfasdf",a);// ...

  4. VC亲自教你写BP

    2015年5月24日下午,腾讯开放平台“创业ABC”沙龙在腾讯众创空间(上海)举行.活动以“创业融资实战——从计划书到如何估值到如何花钱”为主题,险峰华兴投资负责人徐建海先生现场分享<如何写BP ...

  5. WinForm使用皮肤图文步骤

    Winfrom本身样式提供的是Windows经典样式.. 不说多丑也绝称不上好看..有时为了用户体验就不得不需要想办法弄漂亮一点..皮肤包会是一个不错的选择.. 不废话了..开整.. 首先从网上下载免 ...

  6. java 的 AccessController.doPrivileged使用

    AccessController.doPrivileged意思是这个是特别的,不用做权限检查. 在什么地方会用到呢:加入1.jar中有类可以读取一个文件,现在我们要使用1.jar去做这个事情.但是我们 ...

  7. Mysql函数：Last_insert_id()语法讲解

    Mysql函数可以实现许多我们需要的功能,下面介绍的Mysql函数Last_insert_id()就是其中之一,希望对您学习Mysql函数能有所帮助. 自动返回最后一个INSERT或 UPDATE 查 ...

  8. java的集合框架最全详解

    java的集合框架最全详解(图) 前言:数据结构对程序设计有着深远的影响,在面向过程的C语言中,数据库结构用struct来描述,而在面向对象的编程中,数据结构是用类来描述的,并且包含有对该数据结构操作 ...

  9. Scala 中object和class的区别

    Scala中没有静态类型,但是有有“伴侣对象”,起到类似的作用. Scala中类对象中不可有静态变量和静态方法,但是提供了“伴侣对象”的功能:在和类的同一个文件中定义同名的Object对象:(须在同一 ...

  10. linux的bash 终端操作快捷键

    bash中的快捷键操作: 分为两大类, 一是移动, 另一个是删除 一. 移动 1. 按字符移动: ctrl+f, ctrl+b 3. 按行移动: ctrl+a, ctrl+e 二. 删除: 1. 按字 ...