【无异味】如何使用 Bootstrap 4 创建没有 Bootstrap 异味的 CSS

2018.05.07

Web系统开发

1 你为什么要这么做？
2 提前准备
3 首先尝试编译。
4 修改 Bootstrap
5 概括
6 实用链接

大家好，
我是Mandai，Wild团队负责开发工作的成员。

这可能有点过时了，但Twitter Bootstrap（以下简称Bootstrap）4.0版本已经发布（尽管在撰写本文时4.1版本已经发布）。它
经常被使用，尤其是在创建快速且视觉效果良好的网站时，例如管理面板，但真正令人困扰的是所谓的“Bootstrap异味”，不是吗？

Bootstrap 版本 4 支持使用 Sass 进行预编译，所以我希望对其进行彻底的“除臭”（修改），看看我能去除多少 Bootstrap 的“异味”。

你为什么要这么做？

虽然 Bootstrap 会让很多设计看起来相似，但我个人认为它的设计能力非常出色，而它的广泛应用正是源于这种认可。
反之，它经常被忽视的主要原因可能是因为它看起来与其他方案太过相似。
此外，生成的 HTML 结构也是一个需要考虑的因素，但我认为这几乎完全是个人偏好问题，所以这里就不赘述了。

换句话说，如果你能够掌握 Bootstrap 独特的布局和配色方案，就可以以 Bootstrap 为基础，利用网格系统、表单和响应式布局等便捷组件，同时在设计方面仍然保持灵活性。

提前准备

准备完整的 Bootstrap 源代码和 Sass 编译环境。

下载 Bootstrap 源代码

Bootstrap 代码可在 GitHub 上找到。

twbs/bootstrap：最流行的 HTML、CSS 和 JavaScript 框架，用于在 Web 上开发响应式、移动优先的项目。.

在合适的目录中，运行以下命令克隆存储库。

git clone https://github.com/twbs/bootstrap.git

酱汁的制作就完成了。

编译环境

如前所述，Bootstrap 4 使用 Sass 编译，因此需要像 webpack 或 compass 这样的预处理器。
任何能够将 SCSS 文件编译成 CSS 的工具都可以。

我这里用的是 gulp 任务，它使用了 node-sass，我已经用了很久了。
如果你只是想编译，可以在 Node.js 环境下运行以下命令来创建一个 Sass 编译环境。

npm install node-sass -g

上述命令将允许您使用 node-sass 作为命令，因此您只需进行必要的修改，然后使用 node-sass 命令编译它即可。

# 编译命令示例 node-sass test.scss test.css # 自动编译 node-sass test-scss test.css -w

node-sass 命令有一个 watch 选项，这意味着它会在文件被修改时自动编译。我强烈推荐使用它。

首先尝试编译。

如果在 git 克隆 Bootstrap 后进行编译，您将得到 Bootstrap 的裸版本（您可以通过从 CDN 等下载获得该版本）。

# 在执行 git clone node-sass ./bootstrap/scss/bootstrap.scss /path/to/bootstrap.css 之后立即执行

我觉得汇编工作很快就要完成了，但出乎意料地容易，所以有点虎头蛇尾。
现在真正的工作才刚刚开始。

修改 Bootstrap

现在让我们来修改 Bootstrap！
编译 Bootstrap 时作为入口点的 scss 文件是 ./scss/bootstrap.scss 文件。

修改 Bootstrap 时，如果直接修改 Bootstrap 端的 SCSS 文件，可能会遇到数据丢失或 Bootstrap 更新时无法执行 `git pull` 等问题。
在这种情况下，创建一个单独的 SCSS 文件用于修改，并将 bootstrap.scss 导入其中，可以大大简化 Bootstrap 的更新过程。

如需修改，请设置一个类似下面的入口 scss 文件。

@import "/path/to/bootstrap.scss"; // 添加以下修改后的样式

首先，我想尝试更改配色方案，这是最简单有效的修改方法。

在 Bootstrap 4 中，配色方案和各种数值都是用变量定义的，因此您可以通过覆盖变量并重新编译来进行大量的修改。
变量定义一个文件都集中在

Bootstrap 中最具特色的颜色之一是蓝色 (#007bff)，仅仅更改这个颜色就能显著改变整体视觉效果。
许多人可能都用这个颜色来区分自己的网站。
这个颜色由变量 $blue 定义，同时也被指定为主主题颜色 $primary，这意味着使用原始 Bootstrap 的网站尤其容易受到这种颜色变化的影响。

如果您想更改配色方案，请先调整以下六个变量，看看您的网站主题会发生怎样的变化。