Bootstrap4 定制自己的颜色和风格

Bootstrap4 定制自己的颜色和风格

---

Bootstrap是现在最流行的CSS框架，有许多网站、后台管理系统的样式都是基于Bootstrap设计的。然而，Bootstrap 始终保持着那蓝色 + 浅灰色彩基调，最新的 Bootstrap4 也是如此，看久了难免有些审美疲劳。

怎么修改 Bootstrap 的色彩主题呢？本篇就教你如何定制 Bootstrap4，使你的页面更与众不同一些。

0. 需要的工具

• Node.js 编译 Bootstrap4、下载Bootstrap的依赖包，需要在电脑上安装 Node.js
• Bootstrap4 源代码 修改 Boostrap 需要一份源代码，访问 Bootstrap 官方网站（https://getbootstrap.com）可以下载到源代码。

有些地方可能无法访问 Bootstrap4 官网，那么也可以访问 Bootstrap 中文网 下载到源代码。

1. 定制颜色主题

Bootstrap为了方便定制，将一些变量提取了出来，放在 scss/_varaibles.scss 文件中。

打开这个文件，可以发现有非常多的配置，找到这一段：

$primary:       $blue !defa