Grid Asas - Ditindan Secara Mendatar


Contoh berikut mencipta sistem grid asas yang berjubin mendatar pada peranti PC dan tablet, dan disusun secara mendatar pada peranti yang lebih kecil seperti telefon mudah alih.

Instance

<!DOCTYPE html>
<html>
<head>
  <title>Foundation 实例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css">
  <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script>
  <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script>
</head>
<body style="padding:20px">

<div class="row">
  <h2>Foundation 网格</h2>
  <p>两列网格堆叠实例。</p>
  <p>重置浏览器窗口大小查看效果。</p>
  <div class="medium-6 columns" style="background-color:yellow;">php中文网</div>
  <div class="medium-6 columns" style="background-color:pink;">php中文网</div>
</div>

</body>
</html>

Run Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

NotePetua: . small|medium Nombor dalam kelas |large-* menentukan bilangan lajur untuk rentang. Jadi, .small-1 merangkumi 1 lajur, .small-4 merangkumi 4 lajur, .small-6 merangkumi 6 lajur (50% lebar), dsb.
Note提示:  .small|medium|large-* 类中的数字指定了跨越的列数。所以， .small-1 跨越 1 列, .small-4 跨越 4 列, .small-6 跨越 6 列 (50% 宽度) 等。

注意: 要保证数列加起来是 12 列!
<🎜>Nota: Pastikan urutan nombor menambah sehingga 12 lajur!