Twitter Bootstrap".container"类:如何在语义上使用它？

Question

一天前,我决定玩Twitter Bootstrap.发现它非常精心制作,但我不是所有那些污染我的HTML的类的粉丝.

因此我尝试使用Less来使其更具语义性.直到我跨过.container课程,我才做得很好."mixins.less"文件(第580行)中有一个mixin,用于设置容器宽度.但是如果不直接在html上包含类,我就无法工作.将它放入我的自定义文件时,我总是遇到编译错误.我尝试复制并插入我的文件,但没有成功......任何人都经历过这个？

当然,我可以手动强制宽度,但我不认为这是最好的方法.有任何想法吗？

Answer 1

这是迄今为止我发现的最好的治疗方法.借鉴作者的例子:

大多数人使用这个:

<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
  }
}