自定义bootstrap 3减少项目结构问题

Question

我已经阅读了以下文章,该文章描述了一个很好的Bootstrap Less项目结构,它允许自定义引导程序而无需编辑源代码.但是对于Bootstrap 2我猜:

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

我真的很喜欢这篇文章,它建议使用以下结构来减少文件.

1)theme.less在Bootstrap文件之上创建自己的文件

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:bootstrap.less第一次然后第二次在theme.less中)？

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

Answer 1

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

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

2)我不明白为什么utilities.less应该重新导入为最后一个文件(因为它已经导入核心bootstrap:bootstrap.less第一次然后第二次在theme.less中)？

在Bootstrap 2.X中这是有道理的,因为你可以使用那里定义的函数,mixins和变量

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

不,在Bootstrap 3中,您不需要导入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%;
}