调整 Bootstrap 2.0 以实现语义标记

Question

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

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

由于 Bootstrap 是基于 less 构建的，所以我期望有一种好方法使用特定于项目的 less 表，它可以利用 mixin 将 bootstrap 定义的优点归因于良好的语义类名称。

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

#call-to-action {
    .span6;
}

但 lessc 对此感到窒息，并抱怨：

.span6 is undefined in

同样，尝试 .columns(6) 会产生相同的错误（“.columns 未定义”）。

其他混合，例如 .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 编写样式表，则可以在样式表中包含 Bootstrap 类而不是在你的 HTML 中。

请停止在 HTML 中嵌入 Bootstrap 类！

Answer 7

我正在使用 https://github.com/thomas-mcdonald/bootstrap-sass 使用@extend 功能。
但它的效果很糟糕:-(

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

它甚至没有排成一行...

===

哦！我在这个页面找到了我的答案：
如何将 twitter bootstrap 与 bootstrap-sass 一起使用Rails 应用程序？

Answer 8

不同意您应该“放弃”和“用简单的方法来做”的回应 - 在标记中操作类不是简单的方法。例如：当您的网站在手机上查看时，class="span4"是什么？

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

这个库很棒，因为它带有前缀以避免 mixin 名称冲突。它很容易用于原型设计，然后您可以快速摆脱它 - 就像 bootstrap 的用途一样。