جعل دروبال "أسلوب شبكة المشاهدات" يستجيب مع Bootstrap

من المحتمل أنك استخدمت تنسيق أسلوب الشبكة الشهير في Views لإخراج العناصر بسهولة في الشبكة. ربما لاحظت أيضًا أن تنسيق نمط الشبكة يستخدم جداول غير مستجيبة ولا تعمل جيدًا مع مكتبة Bootstrap UI الخاصة بتويتر .

في ما يلي تجاوز سريع للاختراق لجعل تنسيق Grid Style المفضل لديك مستجيبًا ويلعب جيدًا دون الحاجة إلى CSS إضافي.

ما هي الحيلة؟

سهل! الغرض كله هو استبدال علامات html في views-view-grid.tpl.php لنا <div> بدلاً من <table> ، وشبكة Bootstrap بدلاً من <tr> و <td> .

كيف يتم ذلك؟

1. تجاوز views-view-grid.tpl.php في السمة الخاصة بك باستخدام الرمز أدناه.
2. تأكد من اختيار تنسيق نمط الشبكة من إعدادات تنسيق العرض.

<?php if (!empty($title)) : ?>
  <h3><?php print $title; ?></h3>
<?php endif; ?>
<div class="<?php print $class; ?>"<?php print $attributes; ?>>
  <?php if (!empty($caption)) : ?>
    <caption><?php print $caption; ?></caption>
  <?php endif; ?>

  <div>
    <?php foreach ($rows as $row_number => $columns): ?>
      <?php
        $columns_count = count($columns);
        $span_number = round(12 / $columns_count);
       ?>
      <div <?php if ($row_classes[$row_number]) { print 'class="row-fluid ' . $row_classes[$row_number] .'"';  } ?>>
        <?php foreach ($columns as $column_number => $item): ?>
          <div <?php if ($column_classes[$row_number][$column_number]) { print 'class="span' . $span_number . ' ' . $column_classes[$row_number][$column_number] .'"';  } ?>>
            <?php print $item; ?>
          </div>
        <?php endforeach; ?>
      </div>
    <?php endforeach; ?>
  </div>
</div>