定制 Bootstrap

除了通过 CDN 加载编译好的 Bootstrap 代码，还可以通过构建系统对原始代码文件进行编译。

Bootstrap 样式设置的原始代码是基于 Scss，我们可以对其进行修改，这样就可以生成专属的自定义全局样式，再通过 NPM 脚本对网页源代码进行编译转换为浏览器可读取的代码，就可以部署到服务器上。

构建工具

需要在本地设置编译环境以实现编译。

Bootstrap 编译基于 Node.js 环境，需要先下载并安装 Node.js
Tip
如果使用 Visual Studio Code 编辑器，可以在其终端输入 node -v 查看 node 版本以确实是否安装成功
拷贝一份 Bootstrap 原始代码，我们需要对其中的代码进行定制化修改
我们使用程序 Gulp 对 Bootstrap 源代码进行编译，需要在终端通过 npm 在全域环境中安装该程序（每台电脑仅需执行一次）
shell
```
npm install gulp -g
```
Warning
如果是 Mac 或 Linux 用户需要管理员权限，则使用命令 sudo npm install gulp -g
进入 Bootstrap 源文件 /bootstrap 目录，在终端使用 npm 安装 Bootstrap 编译所需要的其他程序套件 ⚠️ 对于每一个使用 Bootstrap 源文件的项目都需要执行一次 npm install 命令，才可以使用 Gulp 程序对该项目的 Bootstrap 进行编译。
shell
```
 npm install
```
Tip
所需套件都列在（Bootstrap 源文件副本已包含） package.json 文件中。
在修改源代码后，使用 Gulp 对 Bootstrap 源代码进行编译
shell
```
gulp
```
Tip
如果需要终止终端运行的程序，可以使用快捷键 Ctrl + C

定制样式

Bootstrap 4 是使用 Sass 编写样式设置，源代码由一系列 Sass 文件构成，我们可以对里面的属性值进行修改，以设计出符合自己网站的特定主题风格样式。

Tip

当项目使用 npm 套件管理工具编译时一般具有以下文件结构，Bootstrap 一系列 Scss 文件在目录 node_modules -> Bootstrap -> scss 之中，一般在项目中 HTML 文档只引入的样式表是 custom.scss，而再通过在该样式表中导入 Bootstrap （部分）模块以使用框架。

your-project/
├── scss
│   └── custom.scss
└── node_modules/
    └── bootstrap
        ├── js
        └── scss

在项目样式表中导入 Bootstrap 4 模块，可以直接引入 bootstrap.scss 以导入全部的模块

scss

// custom.css
// Option A: Include all of Bootstrap

@import "node_modules/bootstrap/scss/bootstrap";

也可以依据网页使用的元件和样式属性按需导入 Bootstrap 模块，这样编译后的样式表会更小。

scss

// custom.css
// Option B: Include parts of Bootstrap

// Required
@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";

// Optional
@import "node_modules/bootstrap/scss/reboot";
@import "node_modules/bootstrap/scss/type";
@import "node_modules/bootstrap/scss/images";
@import "node_modules/bootstrap/scss/code";
@import "node_modules/bootstrap/scss/grid";

Warning

Bootstrap 的组件有相互依赖性，因此在注释 // Required 之下是必须导入的 Scss 模块。

Tip

为了定制化 Bootstrap 样式需要修改其源代码，但不推荐直接在 Bootstrap 核心代码上直接修改，一般在项目中另建一个新的 Scss 文档，如在项目新建目录 helpers 之下创建同名的模块文件，如需要修改变量就创建 _variables.scss 文件（在 Sass 中以下划线 _ 命名的文档不会被编译为 css 文档，但是能够被引用，使用在其中存储变量、元件等脚手架代码），并将 Bootstrap 相应的 Scss 文件源代码内容复制一份到里面，在这个 Scss 文件里进行定制化，记得同时在项目的样式表 custom.css 修改该模块引用源为当前新建的 Scss 文件，以在编译使用该文件（而非 node_modules 文件里的同名 Scss 文件），通过这种工作流就可以不触及 Bootstrap 4 的核心文件。

修改变量值

Bootstrap 4 使用的 Sass 变量在文档 _variables.scss 中，每个 Sass 变量都包含 !default 默认值，我们在定制样式是可以修改以覆盖这些预设值（记得删除 !default 关键字）。

提供的变量主要涉及常见的通用样式，如颜色，大小，字体等。此外还有一些布尔值变量 $enable-*，开启/关闭可以控制全局的样式

变量	值	描述
`$enable-shadows`	`true` or `false` (default)	控制开启/关闭各元件上 `box-shadow` 样式
`$enable-gradients`	`true` or `false` (default)	控制开启/关闭各元件上 `background-image` 渐变样式
`$enable-transitions`	`true` (default) or `false`	控制开启/关闭各元件上的 `transition`动效变换样式
`$enable-grid-classes`	`true` (default) or `false`	控制开启/关闭使用网格系统 Grid System CSS Class (如 `.container`, `.row`, `.col-md-1`, 等)

Tip

Bootstrap 使用 Sass Maps 生成一系列连贯相似的类属性样式，可以对其中的键值对进行修改，以定制多个类属性。而需要移除其中的键值对，可以使用方法 map-remove()

scss

// 移除预设的色彩样式值
$theme-colors: map-remove($theme-colors, "success", "info", "danger");

Warning

部分色彩样式是编译必须的（用于错误提示等），包括 primary、success、danger，它们不可以被删除，只能被修改，否则编译会报错。

定制元件

还可以自定义 Bootstrap 元件（即一个样式集合），并将样式设置放置在 _componentName.scss 文件中，并在 custom.css 文档中引入 @import componentName

元件定制可以参考官方的 Sass 文件，带有下划线的文件 _conponentName.scss 都是官方内置的元件，模仿其开发代码可以定制出功能丰富的交互式元件。

Tip

可以使用方法 theme-color("colorName") 或 theme-color-level(colorName, num)使用变量存储的颜色，此外可以通过方法 color-yiq(color) 获取给定颜色的对比色，作为文字颜色。

Tip

元件一般提供多种颜色样式，可以使用遍历的方法创建多个元件颜色类属性

scss

@each $color, $value in $theme-colors {
  .componentName-#{$color} {
    background-color: $value;
    color: color-yiq($value);
  }
}