【问题标题】：Semantic Grid with Bootstrap + LESS Mixins ¿ HOW?带有 Bootstrap + LESS Mixins 的语义网格 ¿ 如何？
【发布时间】：2012-04-11 23:45:20
【问题描述】：
Twitter 引导文档讨论了生成网格系统的三个 mixin：
.container-fixed();
#grid > .core();
#grid > .fluid();
我知道如何设置页面以使用引导程序和更少...但我不知道如何在语义上使用网格系统。该文档说明了要使用哪些 mixin，但没有说明如何使用... ¿ 谁能说明如何使用它们来创建语义网格？只是想弄清楚或看看它是如何工作的：S
谢谢！！
【问题讨论】：
标签：
css
twitter
twitter-bootstrap
less
mixins
【解决方案1】：
在引导程序的 navbar.less 中，您会发现以下内容。
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>