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

这是一个相当广泛的问题,但我真的无法将标题缩小到更多.

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

>这真的是预期的做法吗？我应该将Bootstrap源目录移动到其他目录以更有效地工作吗？
>如果我想添加一些自定义LESS用于表示,例如“当屏幕为@ screen-md像素时,隐藏所有img元素”,如何在我的自定义LESS文件中访问@ screen-md？

任何提示都非常感谢,因为我发现文档确实缺乏.

最佳答案

我的工作流程类似于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";

我定义了我的变量并在我的变量中覆盖了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更新巨大的变量和类之后,有时我觉得将自定义变量映射到变量中的引导变量更好,而不是在我的less文件中直接使用Bootstrap.

导入bootstrap.less您可以在任何地方使用任何引导变量.所以,例如：

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

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

相关文章