Latest web development tutorials

Exemples Fondation Grille

Ci-dessous, nous avons recueilli quelques exemples de grille commune.

Trois colonnes égales

Cet exemple montre comment créer trois colonnes égales (33,3% / 33,3% / 33,3%), montrant trois colonnes sur le support et à grande échelle des équipements, l'empilage automatique sur les petits appareils:

Exemples

<Class Div = "ligne">
<Class Div = "moyenne-4 colonnes" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
<Class Div = "moyenne-4 colonnes" style = "background-color: rose;">
<P> .medium-4 </ p>
</ Div>
<Class Div = "moyenne-4 colonnes" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
</ Div>

Essayez »

Trois inégale colonne

Cet exemple montre comment créer trois colonnes inégale (25% / 50% / 25%), montrant trois colonnes sur le support et à grande échelle des équipements, l'empilage automatique sur les petits appareils:

Exemples

<Class Div = "ligne">
<Class Div = "moyenne-3 colonnes" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
<Class Div = "moyenne-6 colonnes" style = "background-color: rose;">
<P> .medium-6 </ p>
</ Div>
<Class Div = "moyenne-3 colonnes" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
</ Div>

Essayez »

Deux colonnes égales

Cet exemple montre comment créer deux colonnes égales (50% / 50%), la proportion de petites, moyennes et grands équipements est toujours supérieur à 50% / 50%:

Exemples

<Class Div = "ligne">
<Class Div = "small-6 colonnes" style = "background-color: yellow;">
<P> .small-6 </ p>
</ Div>
<Class Div = "small-6 style colonnes" = "background-color: rose;">
<P> .small-6 </ p>
</ Div>
</ Div>

Essayez »

Deux colonnes inégales

Cet exemple montre comment créer deux colonnes inégales (33,3% / 66,6%), la proportion de petites, moyennes et grands équipements est toujours supérieur à 33,3% / 66,6%:

Exemples

<Class Div = "ligne">
<Class Div = "small-8 colonnes" style = "background-color: yellow;">
<P> .small-8 </ p>
</ Div>
<Class Div = "small-4 style colonnes" = "background-color: rose;">
<P> .small-4 </ p>
</ Div>
</ Div>

Essayez »

Modifier l'ordre des colonnes

En utilisant .small|medium|large-push-* et .small|medium|large-pull-* classe pour modifier l'ordre des colonnes:

Exemples

<Class Div = "ligne">
<Class Div = "petits-4 colonnes petit-8-poussoirs" style = "background-color: yellow;">
<P> .small-4 .small- 8-push </ p>
</ Div>
<Class Div = "petits-8 colonnes petit-4-pull" style = "background-color: rose;">
<P> .small-8 .small- 4-pull </ p>
</ Div>
</ Div>

Essayez »

Colonne imbriquée

Vous pouvez utiliser des grilles imbriquées (colonne d'insertion de la colonne):

Exemples

<Class Div = "ligne">
<Class Div = "small-8 colonnes"> .small-8
<Class Div = "ligne">
<Class Div = "small-8 colonnes"> .small-8 imbriquée
<Class Div = "ligne">
<Class Div = "small-8 colonnes"> .small-8 imbriqué Encore une fois </ div>
<Class Div = "small-4 colonnes"> .small-4 </ div>
</ Div>
</ Div>
<Class Div = "small-4 colonnes"> .small-4 </ div>
</ Div>
</ Div>
<Class Div = "small-4 colonnes"> .small-4 </ div>
</ Div>

Essayez »

Mixte: mobile, ordinateur de bureau,

système de grille de la Fondation a trois colonnes: .small-* (téléphone cellulaire), .medium-* (plat), et .large-* (bureau). Ces classes peuvent être utilisées de façon dynamique en combinaison, faire la mise en page plus souple:

Astuce: Chaque classe peut être agrandie, si vous voulez la largeur de l'appareil petit et grand écran peut être réglé comme spécifié .small-* .

Exemples

<Class Div = "ligne">
<Class = "Div petits-6 grands-8 colonnes"> .small-6 .Grand-8 </ div>
<Class = "Div petits-6 grands-4 colonnes"> .small-6 .Grand-4 </ div>
</ Div>
<Class Div = "ligne">
<Class = "Div petits-2 grands-4 colonnes"> .small-2 .Grand-2 </ div>
<Class = "Div petits-4 grands-4 colonnes"> .small-4 .Grand-2 </ div>
<Class = "Div petits-6 grands-4 colonnes"> .small-6 .Grand-2 </ div>
</ Div>
<Class Div = "ligne">
<Class = "Div petits-3 grands-5 colonnes"> .small-3 .Grand-5 </ div>
<Class = "Div petits-9 grands-7 colonnes"> .small-9 .Grand-7 </ div>
</ Div>

Essayez »

Mixte: mobile, tablette et appareils de bureau

Exemples

<Class Div = "ligne">
<Class = "Div moyenne 6 grands-8 colonnes"> .medium-6 .Grand-8 </ div>
<Class = "Div moyenne 6 grands-4 colonnes"> .medium-6 .Grand-4 </ div>
</ Div>
<Class Div = "ligne">
<Class Div = "small-4 moyennes-3 grandes-7 colonnes"> .small-4 .medium-3 .Grand-7 </ div>
<Class Div = "small-4 moyennes-6 grandes-3 colonnes"> .small-4 .medium-6 .Grand-3 </ div>
<Class Div = "small-4 moyennes-3 grandes-2 colonnes"> .small-4 .medium-3 .Grand-2 </ div>
</ Div>

Essayez »

La colonne du milieu

Vous pouvez utiliser la colonne centrale .small-centered sur la classe. Moyen et gros équipements peuvent être hérités centrée petits appareils, mais vous devez définir la classe est centrée sur les grands équipements .large-centered .

Exemples

<Class Div = "ligne">
<Classe Div = "petits-4 petits-centrée colonnes"> petite-4 petite centrée </ div>
</ Div>
<Class Div = "ligne">
<Classe Div = "petits-6 petits-centrée colonnes"> petite-6 petits-centrée </ div>
</ Div>
<Class Div = "ligne">
<Classe Div = "petits-6 grandes centrée colonnes"> petit-6 grand-centré </ div>
</ Div>
<Class Div = "ligne">
<Class = "Div petits-8 petits-centrée grands-uncentered colonnes"> petite-8 petite centrée grand-uncentered </ div>
</ Div>
<Class Div = "ligne">
<Classe Div = "petits-10 petits-centrée colonnes"> petite-10 petit-centré </ div>
</ Div>

Essayez »

Colonne Offset

Vous pouvez utiliser .large-offset-* (ou .small-offset-* ) classe, définissez la colonne à droite. Le nombre de colonnes sur la marge gauche de contrôle à l'aide d'un astérisque:

Exemples

<Class Div = "ligne">
<Div class = "grands-1 colonnes"> 1 </ div>
<Classe Div = "grands-11 colonnes"> 11 </ div>
</ Div>
<Class Div = "ligne">
<Div class = "grands-1 colonnes"> 1 </ div>
<Class = "Div grands-10 grands-offset-1 colonnes"> 10, décalage 1 </ div>
</ Div>
<Class Div = "ligne">
<Div class = "grands-1 colonnes"> 1 </ div>
<Class = "Div grands-9 grands-offset-2 colonnes"> 9, décalage 2 </ div>
</ Div>
<Class Div = "ligne">
<Div class = "grands-1 colonnes"> 1 </ div>
<Class = "Div grands-8 grands-offset-3 colonnes"> 8, décalage 3 </ div>
</ Div>

Essayez »

colonne incomplète

Si le numéro de colonne de la ligne et non pas 12, la Fondation seront automatiquement le dernier à le flotteur droit, et un vide pour remplir les colonnes restantes.

Options de .end l' élément de la catégorie pour le dernier jeu du flotteur gauche:

Exemples

<Class Div = "ligne">
<div class = "medium-3 colonnes"> .medium-3 </ div>
<div class = "medium-3 colonnes"> .medium-3 </ div>
<div class = "medium-3 colonnes"> .medium-3 </ div>
</ Div>
<Class Div = "ligne">
<div class = "medium-3 colonnes"> .medium-3 </ div>
<div class = "medium-3 colonnes"> .medium-3 </ div>
<Class = "Div moyenne-3 colonnes finissent"> .medium-3 .end </ div>
</ Div>
Essayez »

Widescreen

Grille ( .row ) Taille maximale (max-width) est 62.5rem. Le Widescreen taille peut être plus grande que 62.5rem, cette colonne ne sera pas remplissage complet de la page, même si la largeur est fixée à 100%. Mais nous pouvons définir une nouvelle max-width via CSS:

Exemples

<Style>
.row {
max-width: 100%;
}
</ Style>

Essayez »

Si vous voulez utiliser le max-width par défaut, mais la couleur de l' inter page entière de fond, alors que vous utilisez sur l'élément conteneur .row la classe, et vous avez besoin de spécifier une couleur de fond:

Exemples

<Style Div = "background-color : corail; padding: 25px;">
<Class Div = "ligne">
<Class Div = "small-6 colonnes" style = "background-color: yellow;"> .small-6 </ div>
<Class Div = "small-6 colonnes" style = "background-color: rose;"> .small-6 </ div>
</ Div>
</ Div>

Essayez »