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布局内容