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

2018.05.07

Web系统开发

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

大家好，
我是开发团队野生队的成员 Mandai。

这可能有点过时了，但 Twitter Bootstrap 的 4.0 版本（以下简称 Bootstrap）已经发布（撰写本文时 4.1 版本已经发布）。它
常用于快速创建美观的网站，尤其是后台管理面板，但它有一点让我不太满意：Bootstrap 特有的那种“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 的工具都可以。

就我而言，我直接复制粘贴了一个使用 node-sass 的 gulp 任务，我已经用了很久了。
如果你只是想编译，可以在运行 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 文件，然后通过 git pull 命令升级 Bootstrap 版本，则数据会丢失，或者根本无法执行 git pull 操作，这可能会很麻烦。
在这种情况下，如果创建一个单独的 scss 文件来存放修改后的代码，并将 bootstrap.scss 导入到该文件中，就可以轻松地升级 Bootstrap 端。

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

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

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

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

提到 Bootstrap 的标志性颜色，我首先想到的是蓝色 (#007bff)，但即使只是改变这个颜色，也能彻底改变整体印象。Bootstrap 的
许多部分都以这个颜色作为区分标志。
这个颜色由变量 `$blue` 定义，同时也被指定为主题的主色 `$primary`，因此使用正版 Bootstrap 的网站都会受到这种影响。

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