https://ducamp.me/index.php?action=history&feed=atom&title=Grid_Foreground 2026-05-13T03:15:09Z Historique des révisions pour cette page sur le wiki MediaWiki 1.35.0 https://ducamp.me/index.php?title=Grid_Foreground&diff=24163&oldid=prev 2020-09-29T16:04:40Z

<p>Page créée avec « &lt;div style=&quot;float: right; margin-top: 0em&quot;&gt;<a href="/index.php?title=Grid/fr&amp;action=edit&amp;redlink=1" class="new" title="Grid/fr (page inexistante)">Français</a> - <a href="/index.php?title=Grid&amp;action=edit&amp;redlink=1" class="new" title="Grid (page inexistante)">English</a>&lt;/div&gt; &lt;h4 class=&quot;subheader&quot;&gt; Créez rapidement et facilement de puissantes configuratio… »</p> <p><b>Nouvelle page</b></p><div>&lt;div style=&quot;float: right; margin-top: 0em&quot;&gt;[[Grid/fr|Français]] - [[Grid|English]]&lt;/div&gt;<br /> &lt;h4 class=&quot;subheader&quot;&gt; Créez rapidement et facilement de puissantes configurations multi-périphériques avec la grille Foundation imbriquée à 12 colonnes. Si vous connaissez les systèmes de grille, vous vous sentirez comme chez vous. Sinon, vous apprendrez rapidement.&lt;/h4&gt;<br /> <br /> === Classes HTML prédéfinies ===<br /> <br /> Ce sont des exemples de différentes manières d&#039;utiliser la grille de Foundation. <br /> Foundation utilise &lt;code&gt;box-sizing: border-box &lt;/code&gt; pour que les bordures et le remplissage n&#039;affectent pas la largeur globale des colonnes, rendant les calculs simples. Puisque Foundation est d&#039;abord mobile, nous allons empiler le contenu par défaut. Vous avez accès à un petit réseau entièrement séparé pour utiliser le point d&#039;arrêt de 768px. Cela signifie que vous pouvez créer des mises en page assez complexes et même supprimer des colonnes si vous le souhaitez.<br /> <br /> &lt;div class=&quot;CodeRay&quot;&gt;<br /> &lt;pre&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-2 large-4 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;small-4 large-4 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;small-6 large-4 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;large-3 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;large-6 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;large-3 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-6 large-2 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;small-6 large-8 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-2 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-3 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;small-9 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;large-4 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;large-8 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-6 large-5 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;small-6 large-7 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;large-6 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;div class=&quot;large-6 columns&quot;&gt;...&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-2 large-4 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;2&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;4&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;small-4 large-4 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;div class=&quot;small-6 large-4 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;4&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;large-3 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;3&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;large-6 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;6&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;large-3 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;3&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-6 large-2 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;2&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;small-6 large-8 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;8&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;small-12 large-2 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;2&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-3 columns&quot;&gt;3&lt;/div&gt;<br /> &lt;div class=&quot;small-9 columns&quot;&gt;9&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;large-4 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;4&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;large-8 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;8&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-6 large-5 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;5&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;small-6 large-7 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;6&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;7&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;large-6 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;6&lt;/span&gt;&lt;/div&gt;<br /> &lt;div class=&quot;large-6 columns&quot;&gt;&lt;span class=&quot;show-for-small&quot;&gt;full&lt;/span&gt;&lt;span class=&quot;hide-for-small&quot;&gt;6&lt;/span&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr&gt;<br /> <br /> === Imbriqué infiniment ===<br /> <br /> La grille permet d&#039;imbriquer autant que vous le souhaitez, bien qu&#039;à un certain moment elle devienne absurde. Vous pouvez utiliser cette imbrication pour créer des mises en page assez complexes, ainsi que d&#039;autres astuces telles que des présentations de formulaire ou d&#039;éléments visuels.<br /> <br /> &lt;div class=&quot;CodeRay&quot;&gt;<br /> &lt;pre&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-8 columns&quot;&gt;8<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-8 columns&quot;&gt;8 Imbriqué<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-8 columns&quot;&gt;8 Imbriqué à nouveau&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-8 columns&quot;&gt;8<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-8 columns&quot;&gt;8 Imbriqué<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-8 columns&quot;&gt;8 Imbriqué à nouveau&lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;small-4 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr&gt;<br /> <br /> === Décalages ===<br /> <br /> Les décalages vous permettent de créer un espace supplémentaire entre les colonnes d&#039;une rangée. Comme le reste de la grille, ils sont emboîtables. Vous pouvez utiliser des classes comme &lt;code&gt;.large-offset-1&lt;/code&gt; et &lt;code&gt;small-offset-3&lt;/code&gt; pour manipuler vos positions de colonne de différentes manières. Vous pouvez compenser jusqu&#039;à 11 car vous ne compenseriez jamais une colonne pleine largeur.<br /> <br /> &lt;div class=&quot;CodeRay&quot;&gt;<br /> &lt;pre&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-11 columns&quot;&gt;11&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-10 large-offset-1 columns&quot;&gt;10, offset 1&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-9 large-offset-2 columns&quot;&gt;9, offset 2&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-8 large-offset-3 columns&quot;&gt;8, offset 3&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> &lt;/div&gt;<br /> <br /> <br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-11 columns&quot;&gt;11&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-10 large-offset-1 columns&quot;&gt;10, offset 1&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-9 large-offset-2 columns&quot;&gt;9, offset 2&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;large-1 columns&quot;&gt;1&lt;/div&gt;<br /> &lt;div class=&quot;large-8 large-offset-3 columns&quot;&gt;8, offset 3&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr&gt;<br /> <br /> === Colonnes Centrées ===<br /> <br /> Les colonnes centrées sont placées au milieu de la ligne. Cela ne centre pas leur contenu, mais centre l&#039;élément de grille lui-même. Ceci est accompli en ajoutant une classe de &lt;code&gt;large-centered&lt;/code&gt; ou &lt;code&gt;small-centered&lt;/code&gt; en fonction du point d&#039;arrêt sur lequel les colonnes doivent être centrées. Les petites versions porteront sur tous les points d&#039;arrêt si elles ne sont pas remplacées par une grande version. Vous pouvez centrer n&#039;importe quel nombre de colonnes. Pour qu&#039;une colonne ne soit pas trop petite, ajoutez une classe de &lt;code&gt;large-uncentered&lt;/code&gt;.<br /> <br /> &lt;div class=&quot;CodeRay&quot;&gt;<br /> &lt;pre&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-3 small-centered columns&quot;&gt;3 centré&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-6 large-centered columns&quot;&gt;6 centré&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-9 small-centered large-uncentered columns&quot;&gt;9 centré&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-11 small-centered columns&quot;&gt;11 centré&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> &lt;/div&gt;<br /> <br /> <br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-3 small-centered columns&quot;&gt;3 centré&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-6 large-centered columns&quot;&gt;6 centré, large&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-9 small-centered large-uncentered columns&quot;&gt;9 centré petit&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-11 small-centered columns&quot;&gt;11 centré&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr&gt;<br /> <br /> === Classement par source ===<br /> <br /> En utilisant ces classes de classement par source, vous pouvez déplacer des colonnes entre nos points d&#039;arrêt. Cela signifie que vous pouvez avoir un sous-menu de navigation sur la gauche sur grands écrans, mais allez ci-dessous pour les petits. &lt;code&gt;push-#&lt;/code&gt; est la syntaxe que vous utiliserez.<br /> <br /> &lt;div class=&quot;CodeRay&quot;&gt;<br /> &lt;pre&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-2 push-10 columns&quot;&gt;2&lt;/div&gt;<br /> &lt;div class=&quot;small-10 pull-2 columns&quot;&gt;10, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-3 push-9 columns&quot;&gt;3&lt;/div&gt;<br /> &lt;div class=&quot;small-9 pull-3 columns&quot;&gt;9, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-4 push-8 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;div class=&quot;small-8 pull-4 columns&quot;&gt;8, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-5 push-7 columns&quot;&gt;5&lt;/div&gt;<br /> &lt;div class=&quot;small-7 pull-5 columns&quot;&gt;5, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-6 push-6 columns&quot;&gt;6&lt;/div&gt;<br /> &lt;div class=&quot;small-6 pull-6 columns&quot;&gt;6, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> &lt;/div&gt;<br /> <br /> <br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-2 push-10 columns&quot;&gt;2&lt;/div&gt;<br /> &lt;div class=&quot;small-10 pull-2 columns&quot;&gt;10, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-3 push-9 columns&quot;&gt;3&lt;/div&gt;<br /> &lt;div class=&quot;small-9 pull-3 columns&quot;&gt;9, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-4 push-8 columns&quot;&gt;4&lt;/div&gt;<br /> &lt;div class=&quot;small-8 pull-4 columns&quot;&gt;8, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-5 push-7 columns&quot;&gt;5&lt;/div&gt;<br /> &lt;div class=&quot;small-7 pull-5 columns&quot;&gt;5, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-6 push-6 columns&quot;&gt;6&lt;/div&gt;<br /> &lt;div class=&quot;small-6 pull-6 columns&quot;&gt;6, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;hr&gt;<br /> <br /> === Petite grille ===<br /> <br /> Comme vous l&#039;avez probablement remarqué dans les exemples ci-dessus, vous avez accès à une petite et grande grille. Si vous savez que la structure de votre grille sera la même pour les petits appareils que pour les gros appareils, utilisez simplement la petite grille.<br /> <br /> &lt;div class=&quot;CodeRay&quot;&gt;<br /> &lt;pre&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-2 columns&quot;&gt;2&lt;/div&gt;<br /> &lt;div class=&quot;small-10 columns&quot;&gt;10, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row&quot;&gt;<br /> &lt;div class=&quot;small-3 columns&quot;&gt;3&lt;/div&gt;<br /> &lt;div class=&quot;small-9 columns&quot;&gt;9, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/pre&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-2 columns&quot;&gt;2&lt;/div&gt;<br /> &lt;div class=&quot;small-10 columns&quot;&gt;10, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;div class=&quot;row display&quot;&gt;<br /> &lt;div class=&quot;small-3 columns&quot;&gt;3&lt;/div&gt;<br /> &lt;div class=&quot;small-9 columns&quot;&gt;9, dernier&lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> __NOTOC__<br /> [[Category:Documentation/fr]]</div>

Xtof