Bootstrap栅格布局&分析grid源码

前言

此为本人自学经验和某站博主经验，与其他简书作者经验共同写出。
如有侵权请联系。

布局

• 首选布局前，大家要明白bootstrap几种布局方式

• 栅格&flex

• 这篇文章先讲解栅格，flex以后介绍

栅格布局

我们来看一个最简单的栅格布局

• 建议大家在学bootstrap时候用webstrom编辑器，它可以轻松提示css补全，当然别的编辑器可以安装插件，只是个人建议

• 这几行代码做了什么
• 定义了一个container的容器，此容器叫固定容器，左右两边各 padding15px
• 在container容器里有一个row元素，row元素将col分为12份
• 在lg（UC端）按每份占据三格的大小来布局，一共四份来布局

Container

左右padding 15px
不同的设备展示不同布局

Row

左右margin -15px

col

左右padding 15px
在col里面可以嵌套row元素

下面讲解着grad源码，更纤细描述栅格

预备知识

你需要对less、或sass有一定了解
由于bootstrap4更新了源码，改用了sass所以在下面我会进行sass源码解析grad布局，less会放在后面当作补充，这样小伙伴两种都可以学到

less和sass

1、less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展，它可以运行在 Node 或浏览器端，
less基于js在客户端处理

2、sass

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 、嵌套 、混合  、导入  等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass  的样式库（如Compass）有助于更好地组织管理样式文件，以及更高效地开发项目，sass基于Ruby在服务端处理

3、Less 、Sass不同点

1. 关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

2. 输出设置，Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

3. Sass支持条件语句，可以使用if{}else{},for{}循环等等，而Less不支持。

4、Less、Sass共同点

1、混入(Mixins)——class中的class；

2、参数混入——可以传递参数的class，就像函数一样；

3、嵌套规则——Class中嵌套class，从而减少重复的代码；

4、运算——CSS中用上数学；

5、颜色功能——可以编辑颜色；

6、名字空间(namespace)——分组样式，从而可以被调用；

7、作用域——局部修改样式；

8、JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

正题

步骤一

首先下载源码文件

步骤二

sass文件夹就是所有css样式的定义

打开sass再打开我们的mixins文件夹这里有我们的grad布局内容

这里是我们全部的变量定义

接下来在到我们的mixins文件夹下找到grid.sass

可以 看到在make-container这个混合里有一个参数

$grid-gutter-width，那这个参数是什么呢，我们到variables.sass（变量文件）去找找这个变量吧

可以看到$grid-gutter-width代表了30px
那么我们再回过头看grid文件

可以看到在这把30px传了过来并且使用$gutter来接受这个变量
跟着设置了一系列样式，再回到我们的浏览器看看我们栅格元素上的属性

这就是我们make-container函数定义的样式，利用在标签.container就可以使用了，其实sass很简单的。

接下来就是我们第二个混合

什么是断点，-xl -lg -md -sm -xs 这就是断点的样式，断点的意义就是标致不同窗口大小展示不同样式

• xl是最大的一般都是网吧电脑或者公司使用的，页面>= 1200 就是xl的范畴
• lg是相对xl小的视口，是默认UC端设备，页面>=992 就是lg的范畴
• md 例如平板，ipad等，页面>=768 就是md范畴
• sm 就是一般手机的大小了，页面>=576 就是sm范畴
• xs 还有一个就是xs，也是一些手机的尺寸，依然广泛流行着，页面<576 就是xs范畴

介绍完断点继续解析我们的源码

container−max−widths，container-max-widths，container−max−widths，grid-breakpoints两个参数且分别赋值给max−widths，max-widths，max−widths，breakpoints

接下来去variables.sass去看看这两个变量分别表示什么

这就是不同设备下container容器显示的宽度
通俗点说这就是最终在电脑、平板、手机、规定的固定宽

而这这个变量就是规定container容器如何显示大小，特如了特定的值，这就是断点

在这个混合中把固定宽和断点当成参数，利用键值对，分配变量名和元素，
最后达到在container容器分配当前接受断点的规定容器宽

下面是不同大小展示的max-width

如果视口大于1200 则展示1140px,也就是xl断点

页面缩小到<992 时，max-width变为960px,此时为lg断点

缩小到<768时，max-width为720，此时为md断点

页面缩小到<576时，max-width等于540，此时为sm断点

此时视口以及小于576像素，那么最大宽为auto，此时的断点就是xs

剩下的几个混合

这几个就是如何创建行、列 ，小伙伴带着欣赏的态度看看就好

先看第一个混合

在前面我们已经知道了值$grid-gutter-width

所以对应的样式就是

大家可以看到这里用margin，right&&left 为什么不用padding呢，而且这个外边距还是负值，这个我们等下再将，这部分简单的说就叫槽宽

再看下面这个混合
大家可以清楚col里面是padding，而且有这么多的class，其实都是来自于递归，我们在构造这个架子的时候需要循环调用，这个等会再讲，继续看我们的grid.sass

来看下面这个混合

传入了$size, grid−columns,用变量grid-columns, 用变量grid−columns,用变量columns保存$grid-columns，但sass是块作用域，变量参数里是多少，在下面也是多少

当前浏览器如果不是25,50,75,100那就自适应宽度（比如60%） 在拿这个值去除12，得到的就是一栏占父元素百分之多少的宽度
有了flex-basis时，写入宽度是会被自动取消的，因为basis认为他是主要的，而width只是次要的，bootsrap开发者很聪明运用了max-width来设置width，是它超不出父容器。
并且这个宽和flex设置的值是一样的

看到这不得不说开发者想的太周全了！

马上我们的grid.sass就要讲完了，小伙伴们是不是多少学到点东西呢
接着看剩下混合吧

剩下的就是重构和超出行，少于宽度会怎么样，小伙伴只需理解就可以
具体的变量variables.sass都有。

今天就和大家告一段落，明日我会继续解析grid-framework.sass文件，
这个文件主要讲的就是怎么继承的class,以及怎么实现的栅格，为什么汇集成那么多class,为什么要用for，而不像less那样只是用递归，sass用for好在哪，以及为什么在不同设备设置不同断点就可以展示不同样式，这就是栅格的魅力！

这个会学到很多，感兴趣的小伙伴可以关注下！！！

const helloWorld = 'HelloWolrd!!!';
console.log(helloWorld);

感谢您的阅读