Venus' Blog

Archive

About

自己定制一个Bootstrap

2019 / 01 / 28

Bootstrap 4 源码是用 SCSS 写的,所以,为了定制一个 Bootstrap,首先需要先安装好构建环境。

搭建构建环境

  1. 下载并安装 Node.js;
  2. 在 Github 上下载 Bootstrap 4 的源码;
  3. 然后在 /bootstrap 的根目录下运行 npm install 安装构建的依赖;
  4. 安装 Ruby,然后输入命令 gem install bundler 安装Bundler,最后运行 bundle install。这一步安装的是 Ruby 的依赖,例如 Jeklly 和它的插件,如果只是构建 CSS 和 JS 的话,这步也可以跳过。

搞定!

改变 SCSS 变量

/bootstrap/scss/_variables.scss 文件下,Bootstrap 定义了许多的变量,我们可以通过新建一个 _custom.scss 文件来覆盖它。现在的目录结构是:

bootstrap
├── ...
├── _custom.scss
├── ...
├── scss
└── ...

之后随便上一个配色网,我上的是 https://coolors.co/browser/latest/1,选好一组配色,然后在 _custom.scss 文件写入:

$primary:   #CE6C47;
$secondary: #AEC5C2;
$red:       #E4151D;
$yellow:    #FFD046;
$green:     #7BC950;
$black:     #1C1C1C;
$grey:      #E3E3E3;

@import "./scss/bootstrap.scss";

注意: 一定要在最后导入 scss/bootstrap.scss

最后还需要将 package.json 文件里的 npm 脚本修改一下,Bootstrap 定义的编译入口文件为 scss/bootstrap.scss,需要修改为我们自己的文件,即 _custom.scss

    "scripts": {
        // ...
-         "css-compile-main": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css && npm run css-copy",
+         "css-compile-main": "node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 _custom.scss dist/css/bootstrap.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-grid.scss dist/css/bootstrap-grid.css && node-sass --output-style expanded --source-map true --source-map-contents true --precision 6 scss/bootstrap-reboot.scss dist/css/bootstrap-reboot.css && npm run css-copy",
    }

然后在 /bootstrap 目录下运行:

$ npm run dist

编译好后,Bootstrap 的 CSS 和 JS 文件就会在 dist 目录下。

结果,上面为修改后的颜色,下面为原来的颜色:

../images/customize-bs.png

还有很多其他的变量,可以查看官网。