[无气味] 如何使用 Bootstrap4 创建没有 Bootstrap 气味的 CSS

你好。
我是Mandai，负责Wild 开发团队。

这可能是一个有点老的消息了，但 Twitter Bootstrap（以下简称 Bootstrap）第 4 版已经发布（在撰写本文时，4.1 版已经发布）。
我认为它经常被用来快速创建一个好看的网站，尤其是管理屏幕，但你最关心的是通常所说的引导气味。

Bootstrap 从版本 4 开始就已经兼容使用 sass 的预编译，所以我想从字面上尝试对其进行除臭（修改），看看我能摆脱 Bootstrap 气味到什么程度。

 

你为什么要这么做？

Bootstrap可能看起来有些相似，但我个人认为它有非常好的设计，我认为这就是它如此受欢迎的原因。
另一方面，我认为人们没有被选中的最常见原因是因为他们太相似了。
我确信还有关于最终 HTML 结构的讨论，但我认为这几乎是宗教性的，所以我不会在这里讨论它。

换句话说，如果您能够设法创建 Bootstrap 独特的布局和配色方案，您就可以使用 Bootstrap 作为基础，享受网格系统、表单和响应式布局等有用组件的好处，同时在设计方面也具有灵活性。 这将是。

 

提前准备

准备Bootstrap源码和sass编译环境。

 

下载Bootstrap源码

Bootstrap 代码发布在 github 上。

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

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

git 克隆 https://github.com/twbs/bootstrap.git

 

至此酱汁准备工作就完成了。

 

编译环境

如上所述，Bootstrap4 使用 sass 进行编译，因此需要像 webpack 或 compass 这样的预处理器。
任何可以将 scss 文件编译为 css 的东西都可以。

就我而言，我使用 node-sass 复制并粘贴了一个 gulp 任务，我已经使用它很长时间了。
如果您暂时只想编译，请在Node.js运行环境中运行以下命令，创建sass编译环境。

npm 安装node-sass -g

 

上面的命令允许你使用node-sass作为命令，所以你所要做的就是修改它并使用node-sass命令编译它。

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

 

node-sass 命令有一个监视选项，因此它能够在文件修改时自动编译文件。我强烈推荐它。

 

我会先尝试编译它。

如果你尝试在git克隆状态下编译Bootstrap，你将得到一个普通版本的Bootstrap（可以通过从CDN等下载来获得）。

# 紧接着 git clone node-sass ./bootstrap/scss/bootstrap.scss /path/to/bootstrap.css

 

我认为编译很快就会完成，但它很容易做到，所以我并不感到惊讶。
现在真正的交易来了。

 

尝试修改Bootstrap

现在让我们修改Boostrap！
作为编译 Bootstrap 本身时的入口点的 scss 文件是一个名为 ./scss/bootstrap.scss 的文件。

修改时，如果修改了bootstrap端的scss文件，git pull Bootstrap本身由于版本升级，可能会出现数据消失或者git pull不了的情况，比较麻烦。
在这种情况下，您可以通过创建单独的scss文件进行修改并将bootstrap.scss导入其中来轻松更新bootstrap的版本。

安装一个 scss 文件，该文件将作为修改的入口点，如下所示。

@import "/path/to/bootstrap.scss"; // 添加下面的样式进行修改

 

首先我想改变一下配色方案，这是最不困难也是最有效的修改。

在Bootstrap 4中，配色方案和各种数值被定义为变量，因此如果覆盖变量并编译，则可以通过多种方式对其进行修改。
变量定义全部定义在一个文件

说到 Bootstrap 独特的颜色，我认为它是蓝色（#007bff），但仅仅改变它就可以彻底改变印象。
可能有很多部件可以通过这个颜色来区分。
这个颜色定义在一个名为$blue的变量中，并且也被指定为主题的主色$primary，因此使用正版Bootstrap的网站很容易受此影响。

如果您想更改配色方案，您可以先通过调整以下六个变量来更改网站的主题。

• $主要
• $次要
• $成功
• $信息
• $警告
• $危险

此外，_variables.scss中还提供了与字体相关的设置，因此您可以调整字体规范和字体大小等基本设置，以及行高和其他行间距。

此外，您还可以全局指定边距和填充、更改圆角的大小等，或者针对每个组件进行调整。

 

概括

如何使用 Bootstrap4 创建感觉不像 Bootstrap 的 CSS？
它很容易编译，设置一般只是调整值的问题，让你平常的Bootstrap看起来完全不同。

我们公司运营的 Appmill 也使用基于Bootstrap的CSS来创建布局。
如果您好奇它是如何制作的，请看一下。

 

有用的链接

• 官方文档
• 配色方案样本书 | 按关键颜色选择的配色方案图案 - 颜色样本和 HTML 颜色代码

 
就是这样。