bootstrap row col 原理_Bootstrap | 结合代码学习Bootstrap3 栅格系统

开篇的话：

大家可能会好奇，技术的滚轮滚滚向前，这个时候怎么还会有博文在介绍Bootstrap 3呢？

技术没有好坏之分，只有适合和不适合的区别，因为我们这个项目对IE有明确的要求，所以Bootstrap 3相对来说更适合，栅格系统又是我认为的Bootstrap的精髓，所以呢，我们就开始今天的博文吧～

简介

Bootstrap中的栅格系统就是通过一系列的行(row)与列(column)的组合创建页面布局。

要使用栅格系统，就要遵循以下规则：

1、数据行(.row)必须包含在容器.container或.container-fluid中

2、列(.column)必须放在数据行(.row)中

3、页面内容应当放置在列容器(.column)之内

4、列与列之间设置了15px的内距(padding)

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-s