27

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

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

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

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

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

我应该怎么做，为什么？

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

4

2 回答 2

5

我对此提出了一个错误并得到了以下回复：

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

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

@import "theme.less";

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

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

但输出是如你所愿。一个胖bootstrap.css文件和一个稍微苗条的bootstrap.min.css文件。

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

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

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

于 2013-11-08T13:49:44.753 回答
4

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

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

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

bower install bootstrap --save

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

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

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

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

于 2015-06-05T16:41:07.883 回答