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

Question

我已经阅读了以下文章，它描述了一个很好的Bootstrap Less项目结构，它允许自定义引导程序而无需编辑源代码。但是我想这是Bootstrap 2：

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

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

1）在Bootstrap文件

之上创建自己的theme.less

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

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

<3>）Bootstrap 2与bootstrap.less一起具有responsive.less文件。在Bootstrap 2中，我必须单独包括responsive.less，但在Bootstrap 3中没有。但是，有react-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%;
}

Answer 2

  

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

最重要的是，Bootstrap本身就是一个框架，您不会创建它，但您可以根据需要使用它并进行更改或添加更改。 Bootstrap 3是基于地面构建的，在某些方面与Bootstrap 2不同。您可能希望克隆/ fork自举以根据需要进行修改。你可以阅读customizing Bootstrap3。虽然，IMO定制v2或v3将大致相似。阅读Stackoverflow thread以了解两个版本之间的主要区别。

  

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

可以在Github Source中找到包含较少文件的结构和顺序。如果要自定义它，可以添加对较少文件的引用。这样你就可以在生成的bootstrap CSS中包含你的更改。

  

2）我不明白为什么utilities.less应该作为最后一个文件重新导入（因为它已导入bootstrap.less）？

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

  

3）Bootstrap 2与bootstrap.less一起具有responsive.less文件。在Bootstrap 2中，我必须单独包括responsive.less，但在Bootstrap 3中没有。

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

  

然而，有respond-utilities.less，我应该将它作为utilities.less之后的最后一个文件包含在内吗？

IMO你应该没有改变任何东西就好了，让它保持原样，并在最后包括你的定制。