Question

Twitters的第2版“Bootstrap”UI框架今天发布。虽然我发现它非常方便，但我不喜欢它是非语义的。

我宁愿避免在我的HTML中设置像.span6 .table-striped这样的类。

由于Bootstrap是基于更少的构建，我期望有一种很好的方法可以使用特定于项目的less表，它可以利用mixins将bootstrap定义的良好归因于漂亮的语义类名。

我将bootstrap.less克隆到myproject.less中，并调整了@import行中的路径，然后在底部添加了以下内容：

#call-to-action {
    .span6;
}

但是Lessc对它嗤之以鼻，抱怨说：

.span6 is undefined in

同样，尝试.columns（6）会产生相同的错误（“.columns is undefined”）。

其他混合，例如.table，.table-bordered等，似乎工作正常。

我错过了什么？使用引导程序的最佳实践是什么，同时将非语义类名称保留在我的语义标记之外？

Answer 1

对于新的 Bootstrap 2.1 （可能适用于2.0）：

.content{ .makeRow();
   .main-content{ .makeColumn(5,2);} // (size,offset)
   .sidebar{ .makeColumn(3); }
}

终于有效！

Answer 2

好吧，这就是我弄清楚的原因。它是我能做的最好的，我无法弄清楚如何处理.row语义，但是哦。

基本上我创建了一个custom-mixins.less并创建了一个名为.col的mixin，变量是@col。所以当你编写你的选择器并做类似.col（3）的事情时; .COL（4）; .COL（5）;或类似的东西。它应该创建适当的宽度。我不知道这对嵌套列有什么用处。

//custom-mixins.less
.col (@col) {
  #gridSystem > .gridColumn(@gridGutterWidth);
  #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @col);
}

//styles.less
.greetings {
  .col(3);
}

lessc将在styles.css中生成以下内容

//styles.css
.greetings {
  float: left;
  margin-left: 20px;
  width: 220px;
}

Answer 3

这是一篇引用git中gist的文章。

本文试图更进一步 - 解决当您将类移出页面时，Bootstrap中的默认响应机制丢失的问题。

Bootstrap with Less

它使用自定义mixin尝试为不同的断点页面宽度创建类。

我想在此发表意见，但我还没有确定它是什么： - /

Answer 4

对我有用的是：创建一个.less文件。

转到https://github.com/twitter/bootstrap/blob/master/less/mixins.less并将.span *，.row，.offset *等复制到您创建的文件中。然后使用这样的：

myfile.css.less：

...<snip>...
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
...<snip>...
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
...<snip>...

#page_footer {
    .about {
      .span4;
      .offset10;
    }
}

Answer 5

如果您使用rails，则可以使用sass-bootstrap，然后可以使用mixins

Answer 6

Less提供了mixins，这意味着如果你用Less而不是CSS编写样式表，你可以在样式表中而不是在HTML中包含Bootstrap类。

Please stop embedding Bootstrap classes in your HTML!

Answer 7

我使用https://github.com/thomas-mcdonald/bootstrap-sass和@extend功能但它很糟糕： - （

.my-top {
    @extend .span4;
}
.left-top {
    @extend .span4;
}
.right-top {
    @extned .span4;
}

它甚至连一排......

===

哦！我在这个页面找到了答案：
How to use twitter bootstrap with bootstrap-sass in rails app?

Answer 8

不同意你应该“放弃”和“轻松做事”的回应 - 在标记中操作类并不是一件容易的事。例如：在手机上查看您的网站时，class =“span4”是什么？

我使用https://github.com/vwall/compass-twitter-bootstrap因为它似乎是Twitter Bootstrap到Sass最频繁更新的端口。

这个库很棒，因为它的前缀是为了避免mixin名称冲突。它很容易用于原型设计，然后你可以快速发展它 - 就像使用bootstrap一样。

调整Bootstrap 2.0进行语义标记

8 个答案:

myfile.css.less：