4

我已阅读以下文章，该文章描述了一个不错的 Bootstrap Less 项目结构，该结构允许在不编辑源代码的情况下自定义引导程序。但我猜它适用于 Bootstrap 2：

http://coding.smashingmagazine.com/2013/03/12/customizing-bootstrap/。

我真的很喜欢这篇文章，它为更少的文件建议了以下结构。

theme.less1）在引导文件之上创建自己的

2）在您的新主题中包含以下内容：

 // importing all bootstrap.less files, leve them untouched, so you can update bootstrap
 @import “../bootstrap/less/bootstrap.less”;

 // this is copy of bootstrap variables.less with custom color scheme and other customizations
 @import “custom-variables.less”;

 // your own overrides anc custom classes
 @import “custom-other.less”;

 // utilities as the last
 @import “../bootstrap/less/utilities.less”;

但由于我是 Bootstrap 和 Less 的新手，我不确定这是否 100% 适合 Bootstrap 3。

1）我的问题是这个项目结构是否适合 Bootstrap 3？

2）我不明白为什么utilities.less要作为最后一个文件重新导入（因为它已经导入核心引导程序： bootstrap.less 第一次，然后第二次在 theme.less 中）？

3) Bootstrap 2 有responsive.less文件和bootstrap.less. 在 Bootstrap 2 中，我必须单独包含responsive.less，但在 Bootstrap 3 中没有。但是，有responsive-utilities.less，我应该将它作为最后一个文件包含在 之后utilities.less吗？

4

2 回答 2

5

1）我的问题是这个项目结构是否适合 Bootstrap 3？

不完全是，您需要更改一些文件名并停止导入utilities.less

2）我不明白为什么utilities.less要作为最后一个文件重新导入（因为它已经导入核心引导程序：bootstrap.less 第一次，然后第二次在 theme.less 中）？

在 Bootstrap 2.X 中这是有道理的，因为您可以使用那里定义的函数、mixin 和变量

3) Bootstrap 2 有 responsive.less 文件和 bootstrap.less。在 Bootstrap 2 中，我必须单独包含 responsive.less，但在 Bootstrap 3 中没有。但是，有 responsive-utilities.less，我应该将它作为utilities.less 之后的最后一个文件包含进来吗？

不，在 Bootstrap 3 中，您不需要 import responsive-utilities.less，因为它是由导入的，bootstrap.less并且默认情况下是移动优先的。

这是我用于 BS3 的结构：

@import "../bootstrap/less/bootstrap.less";
@import "variables.less";

//Here start customization and I can use my variables defined in @variables.less
@media (min-width: @screen-lg) {
    width: 30%;
}
于 2013-11-08T10:04:17.757 回答
0

但由于我是 Bootstrap 和 Less 的新手，我不确定这是否 100% 适合 Bootstrap 3。

最重要的是，Bootstrap 本身就是一个框架，您无需创建它，而是使用它并根据需要进行更改或添加更改。Bootstrap 3 是建立在基础之上的，在某些方面与 Bootstrap 2 不同。您可能需要克隆/分叉引导程序以根据需要进行修改。您可以阅读有关自定义 Bootstrap3的信息。虽然，IMO 定制 v2 或 v3 将在很大程度上相似。阅读Stackoverflow 线程以了解两个版本之间的主要区别。

1）我的问题是这个项目结构是否适合 Bootstrap 3？

less 文件的结构和包含顺序可以在Github 源码中找到。如果您想自定义它，您可以附加对您的 less 文件的引用。这样您就可以将您的更改包含在生成的引导 CSS 中。

2) 我不明白为什么应该将实用程序.less 作为最后一个文件重新导入（因为它已经导入到 bootstrap.less 中）？

从源代码（上面的链接参考）中，我看到它只包含一次。

3) Bootstrap 2 有 responsive.less 文件和 bootstrap.less。在 Bootstrap 2 中，我必须单独包含 responsive.less，但在 Bootstrap 3 中没有。

Bootstrap 3 基于移动优先方法，这意味着默认情况下它是响应式的。而在 Bootstrap 2 的情况下，如果需要，需要包含响应式 CSS。

但是，有 responsive-utilities.less，我应该将它作为utilities.less 之后的最后一个文件包含进来吗？

IMO 你应该没问题，在这里不做任何改变，让它保持原样，最后包括你的定制。

于 2013-11-08T08:27:02.433 回答