Bootstrap foreach循环

时间:2019-03-15 21:57:20

标签: html loops foreach dwoo

我有这样的想法。

<div id="main_categories" class="row" data-equalizer>
    {foreach key=row item=category from=$results}   
    <div class="product col-xs-6 col-sm-3 col-md-3 col-lg-3">
        <div class="thumbnail clearfix text-center">
            <div class="image" data-equalizer-watch="image">{$category.photo}</div>
            <div class="caption" data-equalizer-watch="caption">
              <h3 class="name">{$category.name}</h3>
              {if $category.subcategories}
              <p class="hidden-xs">
                  {foreach key=row item=category_subcategories from=$category.subcategories} 
                      <span class="subcategory">{$category_subcategories.name}</span>
                  {/foreach}
              </p>
              {/if}
            </div>
        </div>
    </div>  
{/foreach}

</div>

第三张和第四张或第二张和第三张照片是否有可能以不同的方式出现而不是col-lg-3而不是col-lg-6?

1 个答案:

答案 0 :(得分:0)

经过一番挖掘,我发现SoteShop是在PHP上运行的,在最流行的两种模板语言中,这看起来最类似于Dwoo

仔细阅读文档并将语法拼凑在一起,使我相信以下内容应该有效:

<div id="main_categories" class="row" data-equalizer>
    {foreach key=row item=category from=$results}
    {* 3rd and 4th elements (index 2 and 3) *}
    {if $.foreach.default.index == 2 || $.foreach.default.index == 3}
        {assign 6 lgcol}
    {else}
        {assign 3 lgcol}
    {/if}
    <div class="product col-xs-6 col-sm-3 col-md-3 col-lg-{$lgcol}">
        <div class="thumbnail clearfix text-center">
            <div class="image" data-equalizer-watch="image">{$category.photo}</div>
            <div class="caption" data-equalizer-watch="caption">
              <h3 class="name">{$category.name}</h3>
              {if $category.subcategories}
              <p class="hidden-xs">
                  {foreach key=row item=category_subcategories from=$category.subcategories} 
                      <span class="subcategory">{$category_subcategories.name}</span>
                  {/foreach}
              </p>
              {/if}
            </div>
        </div>
    </div>  
    {/foreach}
</div>