9

Twitter bootstrap documentation talks about three mixins to generate grid systems:

.container-fixed();
#grid > .core();
#grid > .fluid();

I know how to setup the page to use bootstrap and less... But I don't know how to use the grid system semantically. The documentation says what mixins to use but not how... ¿ Could anyone ilustrate how to use them in order to create semantic grids ? Just to figure out or to see how it works :S

Thank you !!

powerbar
  • 323
  • 3
  • 14
Jeflopo
  • 2,192
  • 4
  • 34
  • 46
  • This worked for me: [Another Stackoverflow answer][1] [1]: http://stackoverflow.com/questions/9090238/tweaking-bootstrap-2-0-for-semantic-markup – YogiZoli Apr 24 '12 at 02:20

1 Answers1

13

In navbar.less of bootstrap you will find the following.

grid and .core are used to namespace the .span()

.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}

In cases where you want to keep "span3" etc out of your html you could very well do something similar to:

header {
   #grid > .core .span(12)
}

article.right {
   #grid > .core .span(6)
}

aside.right {
   #grid > .core .span(6)
}

footer {
   #grid > .core .span(12)
}

(12) and (6) are the number of columns you'd like your header element to span. This is of course replacing

<header class="span12"></header>
<article class="span6"></article>
<aside class="span6"></aside>
<footer class="span12"></footer>
Community
  • 1
  • 1
therons
  • 159
  • 2
  • 9
  • 1
    so this is basically doing what http://semantic.gs/ does - but with the advantage of letting you choose which way you do it – Simon_Weaver May 03 '13 at 20:49