Grid Blok Asas


Grid blok digunakan untuk membahagikan kandungan halaman secara sama rata: contohnya, jika anda ingin memaparkan empat gambar dalam satu baris, lebarnya perlu dibahagikan sama rata tanpa mengira skrin.

Grid blok boleh dibuat menggunakan elemen <ul> ditambah dengan kelas .small|medium|large-block-grid-num. num digunakan untuk menentukan bilangan bahagian yang sama:

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;">

<h2>Foundation 块状网格</h2>
<p>图片均分屏幕宽度:</p>
<ul class="small-block-grid-3">
  <li><img src="newyork.jpg" alt="New York" width="400" height="300"></li>
  <li><img src="paris.jpg" alt="Paris" width="400" height="300"></li>
  <li><img src="sanfran.jpg" alt="San Francisco" width="400" height="300"></li>
</ul>

</body>
</html>

Instance berjalan»

Klik butang "Jalankan Instance" untuk melihat contoh dalam talian

Contoh lain, gunakan perenggan:

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;">

<h2>Foundation 块状网格</h2>
<p>均分段落:</p>
<ul class="small-block-grid-3">
  <li><p>Just a Simple Example Text...</p></li>
  <li><p>Just a Simple Example Text...</p></li>
  <li><p>Just a Simple Example Text...</p></li>
</ul>

</body>
</html>

Jalankan Instance»

Klik butang "Run Instance" untuk melihat contoh dalam talian

Skrin saiz yang berbeza memaparkan kuantiti yang berbeza

Dengan menambahkan berbilang blok grid Kelas boleh menetapkan saiz skrin yang berbeza untuk memaparkan bilangan blok yang berbeza:

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;">

<h2>Foundation 块状网格</h2>
<p>通过添加多个块类，在不同屏幕指定不同是均分数量:</p>
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">
  <li><img src="newyork.jpg" alt="New York" width="400" height="300"></li>
  <li><img src="paris.jpg" alt="Paris" width="400" height="300"></li>
  <li><img src="sanfran.jpg" alt="San Francisco" width="400" height="300"></li>
  <li><img src="newyork.jpg" alt="New York" width="400" height="300"></li>
</ul>

</body>
</html>

Jalankan instance»

Klik butang "Jalankan" Contoh" untuk melihat contoh dalam talian