Fondation Grids - gros équipements
Le dernier chapitre, nous avons introduit la proportion d'équipements de taille moyenne et petite mise en page de la grille de l'équipement, du petit matériel pour les 25% / 75% (.small-3 et .small-9), mais la proportion d'équipements de taille moyenne pour 50% / 50% (.medium-6 et .medium-6):
<div class="small-3 medium-6 columns">....</div> <div class="small-9 medium-6 columns">....</div>
Sur un équipement à grande échelle, nous recommandons un rapport de 33% / 66%.
Astuce: La taille de l' écran est plus grande que la définition de la grande 64.0625em d'équipement.
L'utilisation de grands équipements .large-* catégorie.
Maintenant, nous ajoutons deux sur l'équipement à grande échelle:
<div class="small-3 medium-6 large-4 columns">....</div> <div class="small-9 medium-6 large-8 columns">....</div>
résoudre
- La proportion de petits appareils avec deux colonnes% 25/75% (
.small-3et.small-9) - La proportion de dispositif de taille moyenne , avec deux colonnes de% 50/50% (
.medium-6et.medium-6) - La proportion de gros équipement avec deux colonnes de% 33/66% (
.large-4et.large-8)
Exemples
<Class Div = "3-petit style =" background-color: yellow; "medium-6 grande-4 colonnes">
<P> Ce tutoriel </ p>
</ Div>
<Class Div = "petits-9 moyen 6 grandes-8 colonnes" style = "background-color: rose;">
<P> Ce tutoriel </ p>
</ Div>
</ Div>
Essayez »
 | Remarque: Pour veiller à ce que le nombre de colonnes ajouter jusqu'à 12! |
|---|
utilisation Tight sur les gros équipements
L'exemple suivant, nous précisons .large-6 classe (et non .medium- * .small-* ). Ceci indique qu'une proportion importante de l'appareil est de 50% / 50%. Mais dans l'appareil de taille moyenne ou petite empilés horizontalement (largeur de 100%):
Exemples
<Class Div = "grands-6 colonnes" style = "background-color: yellow;">
<P> Ce tutoriel </ p>
</ Div>
<Class Div = "grands-6 style colonnes" = "background-color: rose;">
<P> Ce tutoriel </ p>
</ Div>
</ Div>
Essayez »