grid和.core用于命名.span（）

Question

Twitter bootstrap文档讨论了生成网格系统的三个mixin：

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

我知道如何设置页面以使用bootstrap而不是......但我不知道如何在语义上使用网格系统。文档说明要使用什么mixins而不是如何......¿任何人都可以说明如何使用它们来创建语义网格？只是想弄清楚或看看它是如何工作的：S

谢谢！

Answer 1

在navbar.less of bootstrap中，您将找到以下内容。

grid和.core用于命名.span（）

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

如果你想在你的HTML中保留“span3”等，你可以做类似的事情：

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

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

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

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

（12）和（6）是您希望标题元素跨越的列数。这当然是替换

<header class="span12"></header>
<article class="span6"></article>
<aside class="span6"></aside>
<footer class="span12"></footer>

带Bootstrap + LESS Mixins的语义网格¿怎么样？

1 个答案:

grid和.core用于命名.span（）