##### 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. 蓝桥杯之JAM的计数法

    题目描述 Jam是个喜欢标新立异的科学怪人.他不使用阿拉伯数字计数,而是使用小写英文字母计数,他觉得这样做,会使世界更加丰富多彩.在他的计数法中,每个数字的位数都是相同的(使用相同个数的字母),英文字 ...

  2. 查看实时公网ip

    icanhazip.com 使您在任何地方知道你的公网IP地址 icanhazip.com 使你在任何地方知道你的公网IP地址 icanhazip.com 使你在任何地方知道你的公网IP地址 ican ...

  3. Scrapy URLError

    错误信息如下: 2015-12-03 16:05:08 [scrapy] INFO: Scrapy 1.0.3 started (bot: LabelCrawler) 2015-12-03 16:05 ...

  4. Oracle 表的常见操作

    --创建表并指定表空间 create table goods( id VARCHAR2(20) primary key, name VARCHAR2(20) NOT NULL, price NUMBE ...

  5. C#基础：事件（一） 【转】

    前面简要介绍了委托的基本知识,包括委托的概念.匿名方法.Lambda表达式等,现在讲讲与委托相关的另一个概念:事件. 事件由委托定义,因为事件的触发方(或者说发布方)并不知道事件的订阅方会用什么样的函 ...

  6. 查看oracle锁及解决办法

    SQL> select t2.username,t2.sid,t2.serial#,t2.logon_time from v$locked_object t1, v$session t2 whe ...

  7. 修改ORACLE-NLS_DATE_FORMAT时间格式的四种方式

    修改ORACLE-NLS_DATE_FORMAT时间格式的四种方式 改变ORACLE -NLS_DATE_FORMAT中时间显示格式的显示有以下方式: 1.可以在用户环境变量中指定(LINUX). 在 ...

  8. RSA不对称加密，公钥加密私钥解密，私钥加密公钥解密

    RSA算法是第一个能同时用于加密和数字签名的算法,也易于理解和操作. RSA是被研究得最广泛的公钥算法,从提出到现在已近二十年,经历了各种攻击的考验,逐渐为人们接受,普遍认为是目前最优秀的公钥方案之一 ...

  9. UIScrollView基本使用

    - (void)viewDidLoad { [super viewDidLoad]; scrollView = [[UIScrollView alloc] initWithFrame:CGRectMa ...

  10. mysql 建立索引的原则

    建索引的几大原则 1. 最左前缀匹配原则,非常重要的原则,mysql会一直向右匹配直到遇到范围查询(>.<.between.like)就停止匹配,比如a 1="" an ...