Tweaking Bootstrap 2.0 for Semantic Markup

问题:

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

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

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.

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

But lessc chokes on it, and complains that:

.span6 is undefined in

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

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?

回答1:

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.

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 will generate the following in styles.css

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

回答2:

For the new Bootstrap 2.1 (maybe works on 2.0):

.content{ .makeRow();
   .main-content{ .makeColumn(5,2);} // (size,offset)
   .sidebar{ .makeColumn(3); }
}

Finally works!

回答3:

Here's an article which refernces a gist in git.

This article is trying to go one step further - and solve the problem that the default responsive mechanisms in Bootstrap are lost when you move the classes out of your page.

Bootstrap with Less

It uses a custom mixin to try to create classes for different breakpoint page widths.

I'd like to give my opinion here but I haven't quite decided what it is yet :-/

回答4:

What worked for me: create a .less file.

Go to https://github.com/twitter/bootstrap/blob/master/less/mixins.less and copy the .span*, .row, .offset* etc. into the file you created. Then use the like this:

myfile.css.less:

...<snip>...
.span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
...<snip>...
.offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
...<snip>...

#page_footer {
    .about {
      .span4;
      .offset10;
    }
}

回答5:

if you using rails you could use sass-bootstrap you can then use mixins

回答6:

Less provides mixins, meaning that if you write your stylesheets in Less rather than CSS, you can include the Bootstrap classes in your stylesheet rather than in your HTML.

Please stop embedding Bootstrap classes in your HTML!

回答7:

I'm using https://github.com/thomas-mcdonald/bootstrap-sass with the @extend feature.
but it works awful :-(

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

it didn't even in one row ...

===

oh! I found my answer in this page:
How to use twitter bootstrap with bootstrap-sass in rails app?

回答8:

Disagree with the response that you should "just give up" and "do it the easy way" — manipulating classes in markup not the easy way. For example: When your site is viewed on a mobile phone, what is class="span4"?

I use https://github.com/vwall/compass-twitter-bootstrap because it seems to be the most frequently updated port of Twitter Bootstrap to Sass.

This library is great because it is prefixed to avoid mixin name conflict. It's easy to use for prototyping and then you can quickly grow out of it — just like bootstrap was meant to be used.