Grille des blocs de fondation


La grille de blocs est utilisée pour diviser uniformément le contenu de la page : par exemple, si vous souhaitez afficher quatre images sur une ligne, la largeur doit être divisée de manière égale quel que soit l'écran.

Des grilles de blocs peuvent être créées en utilisant l'élément <ul> plus la classe .small|medium|large-block-grid-num. num est utilisé pour spécifier le nombre de parts égales :

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 en cours d'exécution»

Cliquez sur le bouton "Exécuter l'instance" pour afficher une instance en ligne

Une autre instance, utilisez le paragraphe :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne

Des écrans de différentes tailles affichent différentes quantités

En ajoutant plusieurs blocs de grille, les classes peuvent définir différentes tailles d'écran pour afficher différents nombres de blocs :

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>

Exécuter l'instance»

Cliquez sur le bouton « Exécuter » Exemple » pour afficher des exemples en ligne