Instance de grille de fondation
Ci-dessous, nous avons rassemblé quelques exemples de grilles couramment utilisées.
Trois colonnes égales
Cet exemple montre comment créer trois colonnes égales (33,3 %/33,3 %/33,3 %), affichant trois colonnes sur les appareils moyens et grands, automatiquement empilées sur les petits appareils :
Instances
<!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> <div class="row"> <h2>网格 - 三个均等列</h2> <p>该实例演示了如何创建三个均等列 (33.3%/33.3%/33.3%) ,在中型和大型设备上显示三个列,在小型设备上自动堆叠。</p> <p>重置浏览器窗口大小查看效果。</p> <div class="medium-4 columns" style="background-color:yellow;"> <p>.medium-4</p> </div> <div class="medium-4 columns" style="background-color:pink;"> <p>.medium-4</p> </div> <div class="medium-4 columns" style="background-color:yellow;"> <p>.medium-4</p> </div> </div> </body> </html>
Exécuter l'exemple»
Cliquez sur le bouton «Exécuter l'exemple» pour voir l'exemple en ligne
Trois colonnes inégales
Cet exemple montre comment créer trois colonnes inégales (25%/50%/25%), affichent trois colonnes sur les appareils moyens et grands, automatiquement empilées sur les petits appareils :
Exemple
<!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> <div class="row"> <h2>网格 - 三个不均等列</h2> <p>该实例演示了如何创建三个不均等列 (25%/50%/25%),在中型和大型设备上显示三个列,在小型设备上自动堆叠。</p> <p>重置浏览器窗口大小查看效果。</p> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3</p> </div> <div class="medium-6 columns" style="background-color:pink;"> <p>.medium-6</p> </div> <div class="medium-3 columns" style="background-color:yellow;"> <p>.medium-3</p> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Deux colonnes égales
Cet exemple montre comment créer deux colonnes égales (50%/50%), avec le rapport des colonnes étant toujours de 50%/50% sur les appareils petits, moyens et grands :
Exemple
<!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> <div class="row"> <h2>网格 - 两个均等列</h2> <p>该实例演示了如何创建两个均等列 (50%/50%),在小型、中型和大型设备上列的比例始终为 50%/50%。</p> <p>重置浏览器窗口大小查看效果。</p> <div class="small-6 columns" style="background-color:yellow;"> <p>.small-6</p> </div> <div class="small-6 columns" style="background-color:pink;"> <p>.small-6</p> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Deux colonnes inégales
Cet exemple montre comment créer deux colonnes inégales (33,3 %/66,6 %), le ratio de colonnes étant toujours de 33,3 %/66,6 % sur les appareils petits, moyens et grands :
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> <div class="row"> <h2>网格 - 两个不均等列</h2> <p>该实例演示了如何创建两个不均等列 (33.3%/66.6%),在小型、中型和大型设备上列的比例始终为 33.3%/66.6%。</p> <p>重置浏览器窗口大小查看效果。</p> <div class="small-8 columns" style="background-color:yellow;"> <p>.small-8</p> </div> <div class="small-4 columns" style="background-color:pink;"> <p>.small-4</p> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour visualiser l'instance en ligne
Modifier la commande des colonnes
Modifiez l'ordre des colonnes en utilisant les classes .small|medium|large-push-*
et .small|medium|large-pull-*
:
Instances
<!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> <div class="row"> <h2>网格 - Push 和 Pull</h2> <p>通过使用 <code>.small|medium|large-push-*</code> 和 <code>.small|medium|large-pull-*</code> 类来修改列的顺序:</p> <div class="small-8 columns" style="background-color:yellow;"> <p>.small-8</p> </div> <div class="small-4 columns" style="background-color:pink;"> <p>.small-4</p> </div> <p>Switched:</p> <div class="small-4 small-8-push columns" style="background-color:yellow;"> <p>.small-4 .small-8-push</p> </div> <div class="small-8 small-4-pull columns" style="background-color:pink;"> <p>.small-8 .small-4-pull</p> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Colonnes imbriquées
Vous pouvez utiliser des grilles imbriquées (colonnes Insérer colonne dans) :
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> <div class="row"> <h2>网格 - 嵌套列</h2> <p>列中插入列:</p> <div class="small-8 columns" style="background-color:yellow;">.small-8 <div class="row"> <div class="small-8 columns" style="background-color:lightcyan;">.small-8 Nested <div class="row"> <div class="small-8 columns" style="background-color:lightblue;">.small-8 Nested Again</div> <div class="small-4 columns" style="background-color:lightgreen;">.small-4</div> </div> </div> <div class="small-4 columns" style="background-color:lightgray;">.small-4</div> </div> </div> <div class="small-4 columns" style="background-color:pink;">.small-4</div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne instance
Hybride : mobile, ordinateur de bureau
Le système de grille de la Fondation comporte trois colonnes : .small-*
(mobile), .medium-*
(tablette) et .large-*
(appareil de bureau). Ces classes peuvent être combinées dynamiquement pour rendre la mise en page plus flexible :
Conseils : Chaque classe peut être agrandie. Si vous souhaitez que la largeur des appareils à petit et grand écran soit la même. peux le préciser .small-*
.
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> <div class="row"> <h2>混合:手机、桌面设备</h2> <p>重置浏览器窗口大小查看效果。</p> <div class="small-6 large-8 columns" style="background-color:yellow;">.small-6 .large-8</div> <div class="small-6 large-4 columns" style="background-color:pink;">.small-6 .large-4</div> </div> <div class="row"> <div class="small-2 large-4 columns" style="background-color:lightblue;">.small-2 .large-2</div> <div class="small-4 large-4 columns" style="background-color:yellow;">.small-4 .large-2</div> <div class="small-6 large-4 columns" style="background-color:lightgreen;">.small-6 .large-2</div> </div> <div class="row"> <div class="small-3 large-5 columns" style="background-color:lightcyan;">.small-3 .large-5</div> <div class="small-9 large-7 columns" style="background-color:lightgray;">.small-9 .large-7</div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Hybride : appareils mobiles, tablettes et ordinateurs de bureau
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> <div class="row"> <h2>混合:手机、平板和桌面设备</h2> <p>重置浏览器窗口大小查看效果。</p> <div class="medium-6 large-8 columns" style="background-color:red;">.medium-6 .large-8</div> <div class="medium-6 large-4 columns" style="background-color:yellow;">.medium-6 .large-4</div> </div> <div class="row"> <div class="small-4 medium-3 large-7 columns" style="background-color:pink;">.small-4 .medium-3 .large-7</div> <div class="small-4 medium-6 large-3 columns" style="background-color:lightgreen;">.small-4 .medium-6 .large-3</div> <div class="small-4 medium-3 large-2 columns" style="background-color:orange;">.small-4 .medium-3 .large-2</div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Colonne centrée
Le centrage des colonnes peut utiliser la classe .small-centered
. Les appareils moyens et grands peuvent hériter du centrage des petits appareils, mais vous devez définir la classe de centrage .large-centered
sur les grands appareils.
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> <div class="row"> <h2>网格 - 居中列</h2> <p>列居中可以使用 <code>.small-centered</code> 类。中型和大型设备可以继承小型设备的居中,但你需要在大型设备上设置居中类<code>.large-centered</code> 。</p> <p>重置浏览器窗口大小查看效果。</p> <div class="small-4 small-centered columns" style="background-color:yellow;">small-4 small-centered</div> </div> <div class="row"> <div class="small-6 small-centered columns" style="background-color:pink;">small-6 small-centered</div> </div> <div class="row"> <div class="small-6 large-centered columns" style="background-color:lightgreen;">small-6 large-centered</div> </div> <div class="row"> <div class="small-8 small-centered large-uncentered columns" style="background-color:yellow;">small-8 small-centered large-uncentered</div> </div> <div class="row"> <div class="small-10 small-centered columns" style="background-color:pink;">small-10 small-centered</div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Décalage de colonne
Les colonnes peuvent être décalées vers la droite à l'aide de la classe .large-offset-*
(ou .small-offset-*
). Le nombre de colonnes dans la marge de gauche est contrôlé par le signe * :
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> <div class="row"> <h2>网格 - 偏移量</h2> <p>可以使用 <code>.large-offset-*</code> (或 <code>.small-offset-*</code>) 类设置列向右移。 左侧外边距的列数量使用 * 号控制:</p> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-11 columns" style="background-color:pink;">11</div> </div> <div class="row"> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-10 large-offset-1 columns" style="background-color:pink;">10, offset 1</div> </div> <div class="row"> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-9 large-offset-2 columns" style="background-color:pink;">9, offset 2</div> </div> <div class="row"> <div class="large-1 columns" style="background-color:yellow;">1</div> <div class="large-8 large-offset-3 columns" style="background-color:pink;">8, offset 3</div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter » Exemple » pour afficher des exemples en ligne
Colonnes incomplètes
Si la somme du nombre de colonnes dans une rangée n'est pas 12, Foundation flottera automatiquement la dernière colonne à droite et utilisez Vide pour remplir les colonnes restantes.
La classe .end
facultative est utilisée pour faire flotter les éléments de la dernière colonne vers la gauche :
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> <div class="row"> <h2>不完整列</h2> <p>如果一行中的列数量之和不是 12 , Foundation 将自动将最后一列向右浮动,并使用空白来填充剩下的列。</p> <p>可选项 <code>.end</code> 类用于设置最后一列的元素向左边浮动:</p> <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div> <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div> <div class="medium-3 columns" style="background-color:yellow;">.medium-3</div> </div> <div class="row"> <div class="medium-3 columns" style="background-color:pink;">.medium-3</div> <div class="medium-3 columns" style="background-color:pink;">.medium-3</div> <div class="medium-3 columns end" style="background-color:pink;">.medium-3 .end</div> </div> </body> </html>
Exécuter l'instance »
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Écran large
Grille (.row
) Maximum la taille (largeur maximale) est de 62,5 rem. Sur les appareils à écran large, la taille peut être supérieure à 62,5 rem, de sorte que la colonne ne remplisse pas complètement la page, même si la largeur est définie sur 100 %. Mais nous pouvons définir une nouvelle largeur maximale via CSS :
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> <style> .example { max-width: 100%; } </style> </head> <body> <h2>Foundation 网格</h2> <p>默认情况下,网格最大(<code>.row</code>) 宽度为 62.5rem。在宽屏上,当宽度大于 62.5rem, 列不会跨越页面的宽度, 即使宽度设定为 100%。但你可以通过 CSS 重新设置 max-width:</p> <hr> <div class="row"> <p>基本行 (max-width:62.5rem):</p> <div class="small-6 columns" style="background-color:yellow;">.small-6</div> <div class="small-6 columns" style="background-color:pink;">.small-6</div> </div> <br> <div class="row example"> <p>行的max-width为 100% :</p> <div class="small-6 columns" style="background-color:yellow;">.small-6</div> <div class="small-6 columns" style="background-color:pink;">.small-6</div> </div> <br> </body> </html>
Exécuter l'instance»
Cliquez sur "Exécuter" instance" pour afficher l'instance en ligne
Si vous souhaitez utiliser la largeur maximale par défaut, mais que la couleur d'arrière-plan doit s'étendre sur toute la page, alors vous utilisez la classe .row
sur le conteneur élément et spécifiez la couleur d'arrière-plan dont vous avez besoin :
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> <h2>Foundation 网格</h2> <p>外层容器使用类 .row,并指定背景颜色跨越整个页面:</p> <div class="row" style="background-color:tomato;padding:25px;"> <p>Default Row with a tomato color and padding:</p> <div class="small-6 columns" style="background-color:yellow;">.small-6</div> <div class="small-6 columns" style="background-color:pink;">.small-6</div> </div> <br> <div class="container" style="background-color:coral;padding:25px;"> <div class="row"> <p>Row with container:</p> <div class="small-6 columns" style="background-color:yellow;">.small-6</div> <div class="small-6 columns" style="background-color:pink;">.small-6</div> </div> </div> <br> </body> </html>
Exécuter l'instance»
Cliquez sur "Exécuter l'instance" bouton pour visualiser l'instance en ligne