调整Bootstrap 2.0进行语义标记

Question

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

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

由于Bootstrap是建立在较少的基础之上,我期望有一种很好的方法可以使用特定于项目的更少的工作表,可以利用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;
}