Twitter 引导项目结构答案

【问题标题】：Twitter bootstrap project structureTwitter 引导项目结构
【发布时间】：2012-12-18 06:56:23
【问题描述】：

在每个项目之前我面临的最大困境是我需要使用整个 Bootstrap 还是只使用它所需的部分。我在这个决定上浪费了很多时间。

到目前为止，我的设置是这样的：

将 twitter/bootstrap 中的 less 目录复制到我的样式表目录

├── bootstrap
│   ├── layouts.less
│   └── more...
├── fonts.less
├── mixins.less
├── mysite.less
├── plugins.less
└── variables.less

创建一个plugins.less 文件以包含所需的无引导文件。它看起来像这样：

  @import "bootstrap/layouts.less";
  @import "bootstrap/type.less";
  @import "bootstrap/forms.less";
  @import "bootstrap/buttons.less";
  @import "bootstrap/utilities.less";

然后，在我的 main.less 文件中使用这个 plugins.less。

  @import "fonts.less"
  @import "variables.less"     // Bootstrap's + my variables
  @import "mixins.less"        // Bootstrap's + my mixins
  @import "plugins.less"
  @import "mysite.less"

从我看到的博客文章和讨论中，看起来大多数人只包含 bootstrap.css、bootstrap-responsive.css 并使用 custom.css 覆盖样式。虽然我知道这将最大限度地减少项目的“引导”ping 时间，但我担心膨胀和维护。当我使用这种方法时，我通过 Inspector 看到数百种样式被覆盖。另外，我可能不小心使用了引导程序使用的类名。

我使用的方法有什么缺点吗？还是应该只使用http://twitter.github.com/bootstrap/customize.html 并覆盖custom.less 中的一些类？

【问题讨论】：

标签： twitter-bootstrap less

【解决方案1】：

我个人包括我的项目所需的较少文件，然后自定义给定的类来做我需要的。如果我需要添加自定义类，我会在 custom.less 中完成。

每个项目都不同，所以让 Bootstrap 为你工作。网站会维持多年吗？也许您想花时间删除未使用的较少文件并修改现有类以执行您需要的操作。如果项目需要快速完成并且网站可能会很短暂，只需包含所有 .less 文件并覆盖在 custom.less 中

知道在 Bootstrap 版本 3 中，所有的 less 都将在一个文件 http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/ 中也很有用。就我个人而言，我喜欢使用一个大文件而不是使用许多 .less 文件。

【讨论】：

【解决方案2】：

这是我的设置的样子：

|-bootstrap (as cloned from github)
|
|-css
| |-app.css
| |-app.less (watched by LESS compiler)
|
|-js
| |-app.js
| |-plugins
|
|-img
|  
|-index.html

我在我的 app.less 文件中包含引导文件，我从终端调用 less 编译器编译到 app.css（我在我的 html 模板中链接了这个）

这样我可以随时安全地升级引导程序（在引导程序文件夹中使用简单的git pull）

【讨论】：

【解决方案3】：

您可以在类中指定样式并在需要使用该样式的任何地方使用这些类，而不是覆盖。这样你就不会因为覆盖许多样式和与现有的引导类混合而搞砸了。你可以像这样使用命名空间。

<div class="navbar navbar-default pn-navabr">
  <div class="navbar-inner">
    // Inner code
  </div>
</div> 

.pn-navabr{    // Pn is project name initials, you can choose anything you like maybe dev's name initials 

}
.pn-navabr .navabr-inner{   

}

通过这种方式，您可以真正清理您的 css 并使其真正可扩展，而不会弄乱和覆盖引导程序核心。并且您将始终可以灵活地使用 Sass、Less、混合或纯 CSS。

【讨论】：