##### 1.3.2 栅格系统

- Bootstrap中定义了一套响应式的网格系统，
- 其使用方式就是将一个容器划分成12列，
- 然后通过col-xx-xx的类名控制每一列的占比

##### 1.3.3.row类

- 因为每一个列默认有一个15px的左右外边距
- row类的一个作用就是通过左右-15px屏蔽掉这个边距

##### 1.3.4.col-*\*-\*类

- col-xs-[列数]：在超小屏幕下展示几份
- col-sm-[列数]：在小屏幕下展示几份
- col-md-[列数]：在中等屏幕下展示几份
- col-lg-[列数]：在大屏幕下展示几份
- __xs__ : 超小屏幕 手机 (<768px)
- __sm__ : 小屏幕 平板 (≥768px)
- __md__ : 中等屏幕 桌面显示器 (≥992px)
- __lg__ : 大屏幕 大桌面显示器 (≥1200px)

响应式容器 container
栅格布局 12份一列 row
所占份数 
移动端col-xs-4 一个盒子占4分
小屏幕col-sm-4
中屏幕col-md-4
大屏幕col-lg-4
不满足一行份数会剩余 
超过一行的份数时 会掉下去
流式不距 container-fluid
列偏移：col-xs-offset2
列排序往后推：col-xs-push-9
排序往前拉：col-xs-pull-3

bootstarp栅格系统的更多相关文章

  1. bootstrap栅格系统的使用

    bootstrap栅格系统的使用 bootstrap栅格系统的使用,主要分为四种方式 1.列组合  col-md-* 2.列偏移 col-md-offset-* 3.列嵌套  大列组合包含着小组合 4 ...

  2. CSS3简单的栅格系统

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 初学者--bootstrap（四）栅格系统----在路上（8）

    ---------------------------------------栅格系统:是bootstrap提供的响应式布局方式------------------------------------ ...

  4. Bootstrap之栅格系统

    bootstrap 移动优先 中文官网  http://www.bootcss.com/ 1.基本模板 <!DOCTYPE html> <html lang="en&quo ...

  5. Bootstrap响应式栅格系统的设计原理

    1.历史背景 Bootstrap是Twitter的工程师Mark Otto和Jacob Thornton开发的一套供内部使用的UI框架,于2011年开源.2012年发布的第二版中新增了12列栅格系统和 ...

  6. Bootstrap栅格系统详解,响应式布局

    Bootstrap栅格系统详解 栅格系统介绍 Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. 栅格系统用于通 ...

  7. bootstrap源码分析----栅格系统

    Bootstrap 提供了一套响应式.移动设备优先的流式栅格系统,随着屏幕或视口(viewport)尺寸的增加,系统会自动分为最多12列. bootstrap通过媒体查询解决不同分辨率屏幕下,页面主内 ...

  8. 用sass写栅格系统

    为了验证学习sass的效果,自己写了个简单的栅格系统.

  9. Bootstrap 栅格系统

    1.简介 Bootstrap内置了一套响应式.移动设备优先的流式栅格系统,随着屏幕设备或视口(viewport)尺寸的增加,系统会自动分为最多12列.它包含了易于使用的预定义classe,还有强大的m ...

随机推荐

  1. 电子科大POJ "整数的千位分隔"

    整数的千位分隔 Time Limit: 3000/1000MS (Java/Others)     Memory Limit: 65535/65535KB (Java/Others) C-source ...

  2. 2.5 Local Methods in High Dimensions

    curse of dimensionality 输入在p维立方体中符合均匀分布,如果需要覆盖比例r的体积,需要每个维度上\(e_p(r)=r^{1/p}\) \(e_{10}(0.01)=0.63,e ...

  3. Iptabels详解

    http://www.07net01.com/2016/02/1291283.html Iptabels是与linux内核集成的包过滤防火墙系统,几乎所有的linux发行版本都会包含Iptables的 ...

  4. OC基础13：数字、字符串和集合2

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 17.Foundation框架的数组是有序 ...

  5. poj 2186 (强连通缩点)

    题意:有N只奶牛,奶牛有自己认为最受欢迎的奶牛.奶牛们的这种“认为”是单向可传递的,当A认为B最受欢迎(B不一定认为A最受欢迎),且B认为C最受欢迎时,A一定也认为C最受欢迎.现在给出M对这样的“认为 ...

  6. .NET MV4 Remote远程验证注意事项及案例

    首先是模型代码 public class LoginModel { [Required] [Display(Name = "用户名")] [Remote("CheckNa ...

  7. Malloc碎碎念

    (以前为给同学分享写的点东西,很基础.)现在的比赛中堆溢出非常常见,对于glibc下malloc的理解也要深入一些. malloc_chunk的对齐属性 在glibc中,malloc_chunk以 2 ...

  8. C#整理1——进制转换

    进制转换:二进制,八进制,十进制,十六进制. (一)二进制转十进制: 1.写2 2.标指数,从右向左,从0开始依次标记 3.乘系数,一一对应. 4.相加. 例:二进制数1101转十进制数* 1.2   ...

  9. IE6、7下获得offset值跟其他浏览器不一样问题

    大家都知道,offset是元素的位置坐标,那位置坐标又和文档流有关系.如果position默认不设置的话,其值是static.static是个什么东东呢?下面我详细介绍一下: 语法: position ...

  10. Zepto.js touch模块深入分析 解决手机点击事件

    源码: // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT li ...