Ajustar Bootstrap 2.0 para el marcado semántico

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?

preguntado el 01 de febrero de 12 a las 03:02

I know exactly how you feel about adding "non-semantic classes", but if you're using Bootstrap you should just suck it up and add the required classes in your HTML. Fighting against it is time-consuming. -

what does it exactly say? maybe you need .span6;, or what I do is use the mixins that define .span6 que creo que es .gridColumn(); y la .columns(x);. -

@JonathanOng - that sounds promising, I'll check tomorrow. The error I get is ".span8 is undefined in ..." -- which I get even when including the semicolon. -

are you putting your customizations after all of bootstrap's less files? -

Any progress on this? I love the functionality of bootstrap... but I can't bring myself to little my html like that. -

8 Respuestas

Para el nuevo Bootstrap 2.1 (maybe works on 2.0):

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

Finally works!

Respondido 25 ago 12, 01:08

isn't 5+2+3 supposed to equal 12 ? - Simon_Weaver

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

Respondido 11 Feb 12, 04:02

Thanks, I had forgotten I asked this, and came up with the same solution myself, right down to the "I don't know what to do about 'row'" bit. - timdev

excellent solution, is it working with fluid grids too? thanks! - YogiZoli

2.1+ allows you to use .makeRow() and .makeColumn(columns, offset); which I believe is the preferred route. - Zee Spencer

Here's an article which refernces a esencia en 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 :-/

contestado el 04 de mayo de 13 a las 08:05

What worked for me: create a .less file.

Utilice la herramienta 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;
    }
}

Respondido el 20 de junio de 20 a las 12:06

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

Respondido 03 Feb 12, 16:02

Then you're dependent on another thing and hope like hell the new features and bug-fixes in the original bootstrap make it to the sass version as they come out. - Zabba

Menos 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!

Respondido 02 Oct 12, 18:10

Estoy usando 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?

contestado el 23 de mayo de 17 a las 15:05

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"?

yo suelo 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.

Respondido el 07 de enero de 13 a las 03:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.