带有 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();
我知道如何设置页面以使用引导程序和更少...但我不知道如何在语义上使用网格系统.文档说明了使用什么 mixins 但没有说明如何使用... ¿ 任何人都可以说明如何使用它们来创建语义网格吗?只是想弄清楚或看看它是如何工作的:S
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 of bootstrap 中,您将找到以下内容.
In navbar.less of bootstrap you will find the following.
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
#grid > .core > .span(@gridColumns);
}
如果您想保留span3"等出你的 html 你可以很好地做类似的事情:
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) 和 (6) 是您希望标题元素跨越的列数.这当然是替换
(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屋!