大家好，我是IT修真院成都分院第10期学员李劲宏，一枚正直纯洁善良的web程序员，今天给大家分享一下 BOOTSTRAP栅格布局使用 。
1.背景介绍
BOOTSTRAP的由来
Bootstrap，来自 Twitter，是目前很受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、javaScript 的，它简洁灵活，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap一经推出后颇受欢迎，一直是GitHub上的热门开源项目，国内一些移动开发者较为熟悉的框架，如WeX5前端开源框架等，也是基于Bootstrap源码进行性能优化而来。
2.知识剖析
2.1 原理
网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分12份(也有平分成24份或32份，但12份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap框架中的网格系统就是将容器平分成12份。
在使用的时候大家可以根据实际情况重新编译LESS（或Sass）源码来修改12这个数值（也就是换成24或32，当然你也可以分成更多，但不建议这样使用）。
2.2 使用规则
1 行(.row)必须包含在容器（.container）中，以便为其赋予合适的对齐方式和内距(padding)。
2 在行(.row)中可以添加列(.column)，最多分配12。
3 具体内容应当放置在列容器（column）之内，而且只有列（column）才可以作为行容器(.row)的直接子元素
4 类似 .row 和 .col-sm-4 这种预定义的类，可以用来快速创建栅格布局。
5 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔
2.3 栅格选项
当屏宽小于768px（即小屏）时，列的划分以.col-xs-后面的数字为准。如果没定义.col-xs-，就会变成单列且宽度和row相等。
当屏宽在768px和992px之间（即平板屏）时，列的划分以.col-sm-后面的数字为准。如果没有定义col-sm-，以.col-xs-为准。
当屏宽在992px和1200px之间（即中屏）时，列的划分以.col-md-后面的数字为准。如果没有定义.col-md-，以col-sm-或col-xs-为准。
当屏宽大于1200px（即大屏）时，列的划分以.col-lg-后面的数字为准。如果没有定义.col-md-，以.col-md-或col-sm-或col-xs-为准。
3.常见问题
1.col-xs-1 必须放在.row之中吗 .row必须放在.container之中吗?
2.如何使用bootstrap栅格系统？
小课堂提问：
1bootstrap4的 网格系统的col后面不加任何数字，是什么意思？
解答：：不在每个 col 上添加数字，让 bootstrap 自动处理布局，同一行的每个列宽度相等： 两个 "col" ，每个就为 50% 的宽度。三个 "col"每个就为 33.33% 的宽度，四个 "col"每个就为 25% 的宽度，以此类推
2.对于加了数字的和flex有没有冲突？像 分成 3 1 4 4这样？
答：通过代码演示通过栅格布局分成 3 1 4 4；我们只需要根据内容需要占据的空间，对.row进行分割，把内容放置在分割好的空间之中可以。
3bootstrap如何实现自定义栅格布局？
答；首先我们需要熟透栅格布局的选项：
1 col-lg-大桌面显示器>=（1200px）;
2 col-md-桌面显示屏>=(992px)；
3 col-sm-平板（>=758px）;
4 col-s-手机，超小屏幕（<768px）;
在不同的分辨率下我们对页面的选项单独设置，比如我们在桌面屏下设置了3等分，放到手机屏幕上的时候是没有效果的。之前三等分的内容会独占一行，所以我们需要单独设置在小屏幕下分割内容所需占据的空间。