Bootstrap源码解析（一）

Bootstrap，目前最为流行的前端样式框架，强大的封装，使前端开发变得更简单。

V4之前是用Less写的，V4改用Scss，（Less，Sass就不说了，有兴趣的可以去官网看一下），Bootstrap官方文档里详细介绍了其使用，全局样式设置，布局，内容和各种封装好的开箱即用组件等等。但是在实际使用中，写出来的样式与美工的设计老感觉差很多，这时候就需要我们自己修改一些样式或者自己封装css，既然Bootstrap提供了如此方便的样式封装，同时也可以自行扩展，能无缝进行升级，我们可以在此基础上进行二次封装，当然前提是了解别人的原理。

下载Bootstrap源码

下载链接 选择源码版本下载

结构分析

其他的文件夹暂时不看，我们只关注scss这个文件夹，所有的样式源码都是在这个里边，结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13

scss
│   _alert.scss
│   _badge.scss   
│	...
│	bootstrap.scss
└───utilities
│   │   _align.scss
│   │   _position.scss
│   │	...
└───mixins
    │   _alert.scss
    │   _badge.scss
    │	...

• mixins

  这里边存放的是一些组件公用代码块。因为Bootstrap把颜色分为primary，info，warning，danger等多个级别，也就是它的组件可以在多颜色间切换，根据DRY原则直接进行了封装，只需要传入对应颜色参数即可。

• utilities

  这里边是一些展示实用封装，比如position，display，float等，相当于基础展示封装。

• scss下的直属scss文件

  这里边分三种：一种直接是组件，他们是使用的mixins中封装好的代码块加上一些特定样式组成开箱即用组件；另一种是bootstrap开头的文件，v4之前版本只有把bootstrap.scss文件，它是引用所有的scss源码，最后对这个文件进行编译生成最终css，v4之后变成三个文件bootstrap.scss，bootstrap-grid.scss，bootstrap-reboot.scss，应该是出于模块化考虑，你可以只使用它的grid或者reboot；第三种就是function或者variables等文件，这是定义一些基础函数和变量声明的地方，我们要定制自己的样式的话，主要是对变量文件进行修改。

定制化

打开_variables.scss文件，这是定义基础变量的文件：

1
2
3
4
5
6
7
8
9
10
11

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

我们可以看到Bootstrap官方的颜色定义后面都加了!default，就是在没有提前赋值的情况下，会采用当前的默认值，也就是说，如果我们要定制化自己的样式的话，就必须在这些定义之前重写颜色变量，官方建议的做法是建立自己的custom_variables.scss文件，然后在官方的variables.scss文件引入之前引入，这样就相当于提前赋值，达到重写的目的。

生成定制化文件

在重写完成后，该如何生成我们自己的最终css文件呢：

1
2
3
4
5
6

// 源码包里边有package.json文件，这里边定义了使用到的一些三方插件
// 进入源码包
npm install
// package.json中的scripts下有dist这个命令，就是生成文件的
npm run dist
// 最后在dist目录下寻找我们生成的最终文件，引入项目中即可使用

这次主要说一下Bootstrap源码结构和定制化需要注意的地方，后面会出一篇在变量定制化过程中一些细节问题。