BOOTSTRAP栅格布局使用

            大家好，我是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等分，放到手机屏幕上的时候是没有效果的。之前三等分的内容会独占一行，所以我们需要单独设置在小屏幕下分割内容所需占据的空间。