为什么 Bootstrap 包含一个 bootstrap-theme 文件？

Question

这个问题类似这个问题：How to use bootstrap-theme.css with bootstrap 3? 但不是重复的。我在 .less 级别与 Bootstrap 进行交互，并在每次进行更改时重新编译它。

正如我所说，我正在使用 less 开发 Bootstrap 主题。我在这里编辑位，在那里更改变量。删除未使用的组件。将我的大部分新 CSS 放入 /less/theme.less。最后，我留下了两个 css 文件：/dist/css/bootstrap.css 和 /dist/css/bootstrap-theme（哦，好吧，是的……还有他们的 .min.css 同行，你这个迂腐的知识分子）

将此输出拆分为两个单独的文件有什么意义？它们都偏离了“库存”设置（只需更改 less/variables.less 即可）所以这不是重复劳动？这难道不是我们（自认为最了解的开发人员）不断告诉后辈应该不惜一切代价避免的额外要求吗？

在开发自定义 Bootstrap 主题时，这些是我的选择：

1. 放弃包含的 theme.less 并将我的更改包含在主 Bootstrap 构建中，
2. 在核心引导程序构建中不做任何更改，并覆盖我的 theme.less 中的内容，
3. 继续我的工作，同时更改并使用两个 CSS 文件。

我应该怎么做？为什么？

在相关说明中，如果您单击“下载 Bootstrap”，我是否应该从您获得的文件中构建 Bootstrap？事后看来，这些似乎是为了构建 Bootstrap 文档（那里有大量的 Jekyll 废话，我只是放弃了）。是否有适合想要在没有文档的情况下自定义 Bootstrap 的“干净”版本的 Bootstrap？

Answer 1

我对此提出了一个错误并得到了this response：

我们不会将文档分离到另一个 repo 中，因为它使更新代码变得更加痛苦/困难。

IMO 相当可悲，但这不是我要管理的项目。经过一个小时的询问，我将前两个选项结合起来。我在bootstrap.less的最后一行添加了以下内容：

@import "theme.less";

要使这项工作在现实中发挥作用，需要进行一些更改：

• 清理 Gruntfile 以停止构建单独的主题
• 从 theme.less 文件顶部删除 Bootstrap 导入（如果不这样做会导致循环）

但输出符合预期。一个肥大的bootstrap.css 文件和一个稍微瘦一点的bootstrap.min.css 文件。

我仍然不认为破解整个构建过程是一种使用 Bootstrap 作为入门主题的非常可持续的方法。非常愿意接受更好的解决方案。

---

在另一个项目中，我已经转储了最终导入，我只是在 bootstrap.less 中完成所有工作。当然，顶部有 50 行是样板导入的负载，但这意味着我几乎不会在文件之间跳跃。我知道一直包含什么。

我还删除了 grunt，并使用了我自己的面料解决方案，该解决方案已经在我现有的工作流程中使用。与以往一样，您的里程可能会有所不同。你不是我。

Answer 2

Bootstrap 3 采用了一种方法，从其所有组件中剥离了固执己见的风格。这是因为开发人员不得不重写样式并添加自己的样式，这导致 CSS 臃肿。最好从可用作基础的平面设计开始，然后根据需要在此基础上进行构建。

因此输入theme.less，这是一个模板。这是创建独特主题的起点。如果您将它包含在您的 bootstrap.less 构建中，您将获得我们都习惯看到的默认 Bootstrap 主题（即略微凸起的按钮、渐变等）。这与您的 variables.less 文件配合使用，可让您完全控制 UI 的演示风格。

将 Bootstrap 与 LESS 一起使用的典型工作流程是通过 Bower 使用它。 Bower 站点将解释如何使用 npm 安装 bower。假设您已安装 bower，请使用您选择的命令行应用程序和 cd into/your/root/path/。运行以下命令：

bower install bootstrap --save

Bower 将所有软件包安装到 bower_components/ 目录中。您永远不会更改 Bower 安装的文件。您应该将 Bootstrap LESS 文件中的三个文件复制到您自己的 style 文件夹中。它们是variables.less、bootstrap.less 和theme.less。您可以查看my repo 我设置为所有这些的起点。

您复制的 bootstrap.less 文件应该被更改，以便所有 Bootstrap @import 组件的文件路径引用 Bower 安装的文件路径。然后，您可以将@import 您的theme.less 和variables.less 副本转换为bootstrap.less。根据需要进行更改并编译您的主题。

当您想将 bootstrap 更新到最新版本时，您只需使用 bower 即可执行此操作，并根据需要对复制的文件进行任何调整，以确保它们与新版本中的任何更改相匹配。

我希望这能回答你的问题。