Как мне интегрировать цикл Wordpress во вложенные гриды 960.gs / Bootstrap?

О реализации моего первого сайта 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>
5
задан Olly F 29 February 2012 в 23:51
поделиться