Twitter Bootstrap“.container”类：如何在语义上使用它？答案

【问题标题】：Twitter Bootstrap ".container" class: How to use it semantically?Twitter Bootstrap“.container”类：如何在语义上使用它？
【发布时间】：2012-06-16 06:34:39
【问题描述】：

一天前，我决定尝试使用 Twitter Bootstrap。发现它制作精良，但我不喜欢所有那些污染我的 html 的课程。

所以我尝试使用 Less 使其更具语义化。在我踏上 .container 类之前，我做得很好。 "mixins.less" 文件（第 580 行）中有一个用于设置容器宽度的 mixin。但是如果不直接在 html 中包含该类，我就无法使其工作。将其放入自定义文件时，我总是会遇到编译错误。我尝试将其复制并插入到我的文件中，但没有成功......有人经历过这个吗？

当然，我可以手动强制宽度，但我认为这不是最好的方法。有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap less mixins template-mixins

【解决方案1】：

This 是迄今为止我发现的最好的治疗方法。借鉴作者的例子：

大多数人都使用这个：

<div class="row">
  <div class="span6">...</div>
  <div class="span6">...</div>
</div>

如果你和我一样，那么你正在努力做到这一点：

<!- our new, semanticized HTML -->
<div class="article">
  <div class="main-section">...</div>
  <div class="aside">...</div>
</div>

<!-- its accompanying Less stylesheet -->
.article {
  .makeRow();        // Mixin provided by Bootstrap
  .main-section {
    .makeColumn(10); // Mixin provided by Bootstrap
  }
  .aside {
    .makeColumn(2); // Mixin provided by Bootstrap
  }
}

【讨论】：

哇，非常好！但只有一件事......不应该是：“span10”和“span2”而不是“span6”和“span6”。

【解决方案2】：

上面答案的问题是 makeRow() 和 makeColumn() 混合没有响应。我期待着编写语义类名，但我没有看到像编写例如 row 和 span6 offset1 类名时那样的结果。

您可以查看https://github.com/twitter/bootstrap/issues/2242以获取更多信息。

【讨论】：