Семантическая решетка с Bootstrap + Меньше Mixins Mix КАК? - PullRequest
Новая
       11

Семантическая решетка с Bootstrap + Меньше Mixins Mix КАК?

9 голосов
/ 28 марта 2012

Документация по начальной загрузке в Twitter рассказывает о трех миксинах для создания систем сетки: 

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

Я знаю, как настроить страницу для использования начальной загрузки и менее ... Но я не знаю, как использовать сеткуСистема семантически.В документации говорится, какие миксины использовать, но не как ... ... Может ли кто-нибудь проиллюстрировать, как их использовать для создания семантических сеток?Просто чтобы понять или посмотреть, как это работает: S

Спасибо !!

1 Ответ

13 голосов
/ 20 июля 2012

В navbar.less начальной загрузки вы найдете следующее.

grid и .core используются для пространства имен .span () 

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

В тех случаях, когда вы хотите, чтобы "span3" и т. Д. Не попали в html, вы вполне могли бы сделать что-то похожее на: 

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