这是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. yourphp搜索代码

    HTML代码 <form method="GET" action="index.php?"> //指向地址 <input type=" ...

  2. bootloader (run in CLI or Qt-GUI mode)

    1.PC端 https://github.com/cidadao/efm32_loader http://theramblingness.com/2015/07/16/a-gui-and-cli-ut ...

  3. MVC下的客户端模板技术

    1.引言 在Web编程中,我们有时经常需要使用Ajax来访问服务端的接口,然后使用这些返回的数据(一般格式都是JSON)来展示客户端的相关信息.例如:在一个商品列表,我们点击某一样的商品,查看该商品的 ...

  4. Mongodb 资源

    一.资源 1.C# 驱动下载地址 https://github.com/mongodb/mongo-csharp-driver/releases 2. Mongodb 管理工具 mongochef 下 ...

  5. asp.net MVC动态路由

    项目中遇到需要动态生成控制器和视图的. 于是就折腾半天,动态生成控制器文件和视图文件,但是动态生成控制器不编译是没法访问的. 找人研究后,得到要领: 1.放在App_Code文件夹内 2.不要命名空间 ...

  6. Java8初体验（一）lambda表达式语法

    感谢同事[天锦]的投稿.投稿请联系 tengfei@ifeve.com 本文主要记录自己学习Java8的历程,方便大家一起探讨和自己的备忘.因为本人也是刚刚开始学习Java8,所以文中肯定有错误和理解 ...

  7. jquery-ui 的 主题 选择什么颜色? 建议使用html5 的标准进行书写, 更简洁!

    jQuery ui有多种主体, 基本上, 不能使用 no theme 的"主题包" base: 是基本的, 颜色以深灰色为主, 高亮显示为蓝色, ui lightness(明快) ...

  8. some experience duing wrting myweb in php

    书写风格:一切以 最高效, 最简单为 标准!! 不必管格式的规范了! 在html中, 的属性是用双引号, 在php, tp中, 没有特殊情况, 都是用单引号. vim 下how to format c ...

  9. git log --stat常用命令

    ​1,显示被修改文件的修改统计信息,添加或删除了多少行. git log --stat 2,显示最近两条的修改 git log --stat -2 3,显示具体的修改 git log -p -2 4, ...

  10. golang笔记——数据类型

    25个关键字 程序声明:import, package 程序实体声明和定义:chan, const, func, interface, map, struct, type, var 程序流程控制:go ...