css - 在开发过程中使用 Twitter Bootstrap 3

Question

这是一个相当广泛的问题，但我真的不能将标题缩小到比这个更小的范围。

我已经下载了 Bootstrap 3，我正在对 variables.less 进行自定义，同时运行 grunt watch。每当我对 LESS 进行更改时，grunt 都会将所有内容重新编译到 dist 目录中，我将其复制到我的目标静态目录中。所有这些都很好，但是......

1. 这真的是预期的做法吗？我是否应该将 Bootstrap 源目录移动到其他目录以提高工作效率？

2. 如果我想添加一些自定义 LESS 来表达例如“当屏幕为 @screen-md 像素时隐藏所有 img 元素”，我将如何访问自定义 LESS 文件中的 @screen-md？

非常感谢任何提示，因为我发现文档真的很缺乏。

Answer 1

我的工作流程类似于 Matthew Trow ，但我更喜欢导入 bootstrap.less 文件而不是克隆。

我正在使用 bower为了保持 Bootstrap 更新，所以我的文件夹结构是这样的:

> bower_components
  > bootstrap
  > font-awesome
  > requirejs
  ...
> css
  - project.css
  > less
    - project.less
    - variables.less

我的 project.less 看起来像这样:

// Bootstrap framework
@import "../../bower_components/bootstrap/less/bootstrap.less";

// Font-awesome awesomeness
@import "../../bower_components/font-awesome/less/font-awesome.less";

// Project specific stuff
@import "variables.less";
@import "stuff.less";

我在 variables.less 中定义了我的变量并覆盖了 bootstrap 特定的变量:

// Override Bootstrap variables
@font-family-sans-serif:  "Lucida Grande","Lucida Sans Unicode",Arial,sans-serif;
@btn-default-border: #bbb;
@brand-primary: #b02b2c;
@link-color: #08c;

// Override Font-Awesome variables (path relative to project.css position)
@fa-font-path: "../bower_components/font-awesome/fonts";

//Map Bootstrap variables to myproject specific names
@my-customname-float-breakpoint: @grid-float-breakpoint;
@theme-color: @brand-primary;

//Project specific variables
@my-favourite-color: rgb(228, 1, 1);

然后我只编译 project.less 生成一个包含所有内容的压缩 .css(在示例中还有 Font Awesome)。

在使用 Bootstrap 3 更新大量变量和类之后，有时我觉得将我的自定义变量映射到我的 variables.less 中的 bootstrap 变量，而不是直接在我的 less 文件中使用 Bootstrap 变量。

导入 bootstrap.less 您可以在任何地方使用任何 Bootstrap 变量。所以，例如:

// Hide all images at a viewport smaller than 992px (aka @screen-md)
@media (max-width: @screen-sm-max) {
    img {
        display: none;
    }
}