调整Bootstrap 2.0语义标记 [英] Tweaking Bootstrap 2.0 for Semantic Markup

问题描述

Twitters的第2版BootstrapUI框架今天发布。虽然我觉得它很方便，我不喜欢它是非语义的。

Version 2 of Twitters "Bootstrap" UI framework was released today. While I find it very handy, I dislike how non-semantic it is.

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

I'd rather avoid setting classes like .span6 .table-striped in my HTML.

由于Bootstrap是建立在较少的基础之上，我期望有一个很好的方法使用一个项目特定的更少的表，可以利用mixins来将引导定义的善良好的语义类名。

Since Bootstrap is built on less, I'm expecting that there's a good way use a project-specific less sheet that can leverage mixins to to ascribe bootstrap-defined goodness to nice semantic class names.

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

I cloned bootstrap.less into myproject.less, and adjusted the paths in the @import lines, then added the following at the bottom:

#call-to-action {
    .span6;
}

但是lessc会阻塞它，并且抱怨：

But lessc chokes on it, and complains that:

.span6 is undefined in

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

Similarly, trying .columns(6) produces the same error (".columns is undefined").

其他混合，如.table，.table bordered等，似乎工作得很好。

Other mix-ins, such as .table, .table-bordered, etc, seem to work fine.

我缺少什么？使用引导的最佳实践是什么，同时保持非良好的语义标记的非语义类名？

What am I missing? What are the best practices for using bootstrap while keeping non-semantic class names out of my nice, semantic markup?

推荐答案

少，这是我怎么想出来。它是我能做的最好的，我不知道如何处理.row语义，但是好。

ok in less, this is how I figured it out. Its the best I could do, and I couldn't figure out how to deal with .row semantically, but oh well.

基本上，我创建了一个custom-mixins.less并创建了一个名为.col的mixin，变量是@col。所以当你写你的选择器，并做类似.col（3）; .col（4）; .col（5）;或类似的东西。它应该创建适当的宽度。我不知道这将如何工作的嵌套列。

Basically I created a custom-mixins.less and created a mixin called .col and the variable is @col. So when you write your selector and do something like .col(3); .col(4); .col(5); or something like that. It should create the proper width. I don't know how this would work for nested columns.

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

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

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

lessc will generate the following in styles.css

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

这篇关于调整Bootstrap 2.0语义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！