语义网格与Bootstrap + LESS Mixins¿ [英] Semantic Grid with Bootstrap + LESS Mixins ¿ HOW?

问题描述

Twitter的bootstrap文档谈到三个mixin生成网格系统：

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

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

我知道如何设置页面使用bootstrap和更少...但我不知道如何在语义上使用网格系统。文档说，什么mixins使用，但不是如何...¿有没有人可以使用它们为了创建语义网格？只要找出或看看它是如何工作：

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

谢谢！

推荐答案

在navbar.less中的bootstrap，你会发现以下。

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

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

如果你想保留span3可以很好地做类似的事情：

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）和您希望标题元素跨越的列数。这当然取代了

(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>

这篇关于语义网格与Bootstrap + LESS Mixins¿的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！