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

Why does Bootstrap include a bootstrap-theme file?

提问by Oli

The question is similarto this one: How to use bootstrap-theme.css with bootstrap 3?but not a duplicate. I'm interacting with Bootstrap at .less level and recompiling it every time I make a change.

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

As I say, I'm developing a Bootstrap theme with less. I'm editing bits here, changing variables there. Cutting out unused components. Putting most of my new CSS into /less/theme.less. At the end of it, I'm left with two css files: /dist/css/bootstrap.cssand /dist/css/bootstrap-theme(Oh okay, yes... and their .min.csscounterparts, you pedantic knowitall)

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

What is the point of splitting this output into two separate files?They've both deviated from the "stock" settings (just altering less/variables.lesswill do that) so isn't this a duplication of effort? Isn't this the extra request that we (developers who think they know best) are constantly telling juniors should be avoided at any cost?

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

When developing custom Bootstrap themes, these are my options:

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

1. Ditch the included theme.lessand include my alterations in the main Bootstrap build,
2. Alter nothing in the core bootstrap build and override things in my theme.less,
3. Continue what I'm doing, altering both and using two CSS files.

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

What should I do and why?

我应该怎么做，为什么？

On a related note, should I not be building Bootstrap from the files that you get if you click Download Bootstrap? In hindsight these seem to be geared toward building out the Bootstrap documentation (there's a ton of Jekyll nonsense in there that I just ditch). Is there a "clean" version of Bootstrap that is for people wanting to customise Bootstrap without the documentation?

在相关说明中，我不应该从单击下载 Bootstrap 时获得的文件构建 Bootstrap 吗？事后看来，这些似乎是为了构建 Bootstrap 文档（那里有大量 Jekyll 废话，我只是扔掉了）。是否有“干净”版本的 Bootstrap 供想要在没有文档的情况下自定义 Bootstrap 的人使用？

采纳答案by Oli

I started a bug on this and got this response:

我开始了一个错误并得到了这个回应：

We're not separating the docs into another repo because it makes it much more painful/difficult to keep them up-to-date with changes to the code.

我们不会将文档分离到另一个存储库中，因为随着代码的更改使它们保持最新状态变得更加痛苦/困难。

Pretty pathetic IMO but it's not my project to manage. After an hour of asking I went with combining the first two options. I added the following to the very last line of bootstrap.less:

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

@import "theme.less";

To make that work in reality, there are a couple of alterations required:

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

• Clean up the Gruntfile to stop building the separate theme
• Removing Bootstrap imports from the top of the theme.less file (causes a loop if you don't)

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

But the output is as desired. One fat bootstrap.cssfile and a slightly slimmer bootstrap.min.cssfile.

但是输出是符合要求的。一个胖bootstrap.css文件和一个稍微瘦一点的bootstrap.min.css文件。

I still don't feel like hacking the whole build process is a very sustainable method of using Bootstrap as a starter theme. Very open to better solutions.

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

---

---

In another project I have dumped the final import and I'm just doing all my work in bootstrap.less. Sure, there are 50 lines at the top that are a load of boilerplate imports but it means I'm not hopping between files nearly as much. I know what's being included all the time.

在另一个项目中，我已经放弃了最终的导入，我只是在bootstrap.less. 当然，顶部有 50 行是大量样板导入，但这意味着我几乎没有在文件之间跳转。我一直都知道里面有什么。

I also removed grunt and went with my own fabric solution that was already used in my existing workflow. As ever, your mileage may vary. You're not me.

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

回答by Joshua Pekera

Bootstrap 3 took an approach to strip opinionated style from all of its components. This was because developers were having to over write style and add their own which was causing bloated CSS. It is much better to start with a flat design that can be used as a foundation and build on top of that as you wish.

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

Thus enters theme.less, which is a template. It is a starting point for creating a unique theme. If you include it in your bootstrap.lessbuild you will get the default Bootstrap theme we are all use to seeing (i.e. slightly raised buttons, gradients etc..). This paired with your variables.lessfile give you complete control over the presentation style of your UI.

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

The typical workflow for using Bootstrap with LESS is to consume it with Bower. The Bower site will explain how to install bower with npm. Assuming you have bower installed, use your command line app of choice and cd into/your/root/path/. Run the following:

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

bower install bootstrap --save

bower install bootstrap --save

Bower installs all packages into a bower_components/directory. You will never alter files installed by Bower. You should copy three files from the Bootstrap LESS files into your own stylefolder. These are variables.less, bootstrap.lessand theme.less. You can check out my repoI set up as a staring point for all this.

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

The bootstrap.lessfile you copied should be altered so the file paths for all the Bootstrap @importcomponents reference the ones installed by Bower. You can then @importyour copies of theme.lessand variables.lessinto bootstrap.less. Make changes as you wish and compile your theme.

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

When you want to update bootstrap to the latest version you can simply use bower to do so and make any tweaks to your copied files as needed to make sure they match up with anything changed in a new release.

当您想将引导程序更新到最新版本时，您可以简单地使用 bower 来执行此操作，并根据需要对复制的文件进行任何调整，以确保它们与新版本中更改的任何内容相匹配。

I hope that answers your question.

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