О реализации моего первого сайта Wordpress. Насколько я понимаю, это помогает, если мой цикл вызывает общий элемент, например:
<div id="article-excerpt">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
При использовании Twitter Bootstrap или 960.gs мой канал охватывает несколько столбцов и несколько строк.
Например, статьи располагаются горизонтально во вложенной сетке, состоящей из 5 столбцов. Каждые 5 элементов - новая строка.
Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
Row 1: [article div] [article div] [article div] [article div] [article div]
etc.
Я объясню следующее, чтобы убедиться, что у меня есть фундаментальное понимание того, как работают эти системы.
В 960 г.gs, для вложенных сеток мне нужно объявить первый элемент и последний элемент в каждой строке с классами alpha
и omega
соответственно:
<div id="article excerpt" class="alpha grid_1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
Аналогично, в Twitter Bootstrap мне нужно поместите каждую строку в отдельный DIV:
<div class="row">
<div id="article-excerpt" class="span1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
<div id="article-excerpt" class="span1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
<div id="article-excerpt" class="span1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
<div id="article-excerpt" class="span1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
<div id="article-excerpt" class="span1">
<div>Article Heading</div>
<div>Article Sub-heading</div>
</div>
</div>
Если моя сетка не вложена, все будет немного проще. Я понимаю, что могу просто разместить внутри контейнера span1
или grid_1
. Каждая строка будет автоматически переноситься на следующую строку, когда достигнет максимального количества столбцов.
Имея это в виду, мой цикл Wordpress был бы очень простым. Не нужно было бы идентифицировать первый и последний элементы в строке, или подсчитывать, или увеличивать числа, или что-то в этом роде.
Я хочу узнать, есть ли способ упростить мой подход, чтобы цикл не обязательно должен был подсчитывать элементы, примерно так:
<div class="grid_5">
<LOOP> <div class="grid_1">generic article</div> </LOOP>
</div>