Question

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

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

这真的是预期的做法吗？我应该将Bootstrap源目录移动到其他目录以更有效地工作吗？
如果我想添加一些自定义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变量。

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

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

Answer 2

我个人的做法是将所有引导较少的文件放入名为“bootstrap”的文件夹中，而不是触及任何文件夹。

然后我将自定义较少的文件放在一个文件夹中，该文件夹导入bootstrap资产。我有效地克隆了bootstrap.less文件并在其前面加上项目名称：项目bootstrap.less 然后，这将从引导程序文件夹中导入文件。

在我克隆的project-bootstrap.less文件的基础上，我添加了我的自定义和我的bootstrap覆盖。例如，我将有一个变量文件 only 包含我已经覆盖的引导文件的一部分，当然还有任何自定义变量。我为任何引导程序文件执行此操作，我在其中进行相应的更改和注释。

我的文件夹结构通常是：

css
 > less
   > bootstrap
     - bootstrap files
   - my custom files

然后我简单地编译我的project-bootstrap.less文件。

Answer 3

对我来说，因为他们在variables.less文件中添加了东西，所以我将bs3变量导入到我自己的变量文件中。我将Bootstrap粘贴在我的less目录中的自己的文件夹中。

mixins.less有网格创建和grid.less是使用这些mixin的地方。对于任何大小的所有最小宽度媒体查询，没有一个特定的位置。如果BS3有一个桌面最小宽度，它们会在媒体查询之外的东西之后立即粘贴，以便它在附近。

如果要隐藏md宽度的所有图像，可以使用响应实用程序OR

@media (min-width: @screen-md-min) {

img.md-hide {display:none}

}

然而，下一个尺寸不会看到它们，因为md在堆叠中的lg之前。因此，最好在图像上使用响应实用程序。我相信它的“hidden-md”是你想要隐藏在md上的东西的类（992px或你在变量中设置的任何东西）。

在开发过程中使用Twitter Bootstrap 3

3 个答案: