Esempi Fondazione griglia
Qui di seguito abbiamo raccolto alcuni esempi di rete comune.
Tre colonne uguali
Questo esempio dimostra come creare tre colonne uguali (33,3% / 33,3% / 33,3%), che mostra tre colonne sulle attrezzature di medie e grandi dimensioni, accatastamento automatico su dispositivi di piccole dimensioni:
Esempi
<Div class = "Medium-4 colonne" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
<Div class = "Medium-4 colonne" style = "background-color: rosa;">
<P> .medium-4 </ p>
</ Div>
<Div class = "Medium-4 colonne" style = "background-color: yellow;">
<P> .medium-4 </ p>
</ Div>
</ Div>
Prova »
Tre colonne disuguali
Questo esempio dimostra come creare tre disuguale colonna (25% / 50% / 25%), che mostra tre colonne sulle attrezzature di medie e grandi dimensioni, accatastamento automatico su dispositivi di piccole dimensioni:
Esempi
<Div class = "medio-3 colonne" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
<Div class = "medio-6 colonne" style = "background-color: rosa;">
<P> .medium-6 </ p>
</ Div>
<Div class = "medio-3 colonne" style = "background-color: yellow;">
<P> .medium-3 </ p>
</ Div>
</ Div>
Prova »
Due colonne uguali
Questo esempio dimostra come creare due colonne uguali (50% / 50%), la percentuale di piccole, medie e grandi attrezzature è sempre superiore al 50% / 50%:
Esempi
<Div class = "piccoli-6 colonne" style = "background-color: yellow;">
<P> .small-6 </ p>
</ Div>
<Div class = "piccoli-6 colonne" style = "background-color: rosa;">
<P> .small-6 </ p>
</ Div>
</ Div>
Prova »
Due colonne disuguali
Questo esempio dimostra come creare due colonne diseguali (33,3% / 66,6%), la percentuale di piccole, medie e grandi attrezzature è sempre superiore a 33,3% / 66,6%:
Esempi
<Div class = "piccoli-8 colonne" style = "background-color: yellow;">
<P> .small-8 </ p>
</ Div>
<Div class = "piccoli-4 colonne" style = "background-color: rosa;">
<P> .small-4 </ p>
</ Div>
</ Div>
Prova »
Modificare l'ordine delle colonne
Utilizzando .small|medium|large-push-* e .small|medium|large-pull-* classe di modificare l'ordine delle colonne:
Esempi
<Div class = "piccoli-4 colonne piccolo-8-push" style = "background-color: yellow;">
<P> .small-4 .small- 8-push </ p>
</ Div>
<Div class = "piccoli-8 colonne piccolo-4-pull" style = "background-color: rosa;">
<P> .small-8 .small- 4-pull </ p>
</ Div>
</ Div>
Prova »
Colonna nidificati
È possibile utilizzare le griglie annidate (colonna colonna insert):
Esempi
<Div class = "piccoli-8 colonne"> .small-8
<Div class = "riga">
<Div class = "piccoli-8 colonne"> .small-8 nidificato
<Div class = "riga">
<Div class = "piccoli-8 colonne"> .small-8 nidificati Ancora una volta </ div>
<Div class = "piccoli-4 colonne"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "piccoli-4 colonne"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "piccoli-4 colonne"> .small-4 </ div>
</ Div>
Prova »
Misto: mobili, desktop,
sistema di griglia Fondazione ha tre colonne: .small-* (cellulare), .medium-* (piatta), e .large-* (desktop). Queste classi possono essere utilizzati dinamicamente in combinazione, rendono il layout più flessibile:
Suggerimento: Ogni classe può essere allargata, se si desidera che la larghezza del piccolo e grande schermo dispositivo può essere impostato come specificato .small-* .
Esempi
<Div class = "piccoli-6 grandi-8 colonne"> .small-6 .large-8 </ div>
<Div class = "piccoli-6 grandi-4 colonne"> .small-6 .large-4 </ div>
</ Div>
<Div class = "riga">
<Div class = "piccoli-2 grandi-4 colonne"> .small-2 .large-2 </ div>
<Div class = "piccoli-4 grandi-4 colonne"> .small-4 .large-2 </ div>
<Div class = "piccoli-6 grandi-4 colonne"> .small-6 .large-2 </ div>
</ Div>
<Div class = "riga">
<Div class = "piccoli-3 grandi-5 colonne"> .small-3 .large-5 </ div>
<Div class = "piccoli-9 grandi-7 colonne"> .small-9 .large-7 </ div>
</ Div>
Prova »
Misto: mobili, tablet e dispositivi desktop
Esempi
<Div class = "medio-6 grandi-8 colonne"> .medium-6 .large-8 </ div>
<Div class = "medio-6 grandi-4 colonne"> .medium-6 .large-4 </ div>
</ Div>
<Div class = "riga">
<Div class = "piccolo-4 di media-3 grandi-7 colonne"> .small-4 .medium-3 .large-7 </ div>
<Div class = "piccolo-4 medie-grandi dimensioni 6 3 colonne"> .small-4 .medium-6 .large-3 </ div>
<Div class = "piccolo-4 di media-3 grandi-2 colonne"> .small-4 .medium-3 .large-2 </ div>
</ Div>
Prova »
La colonna centrale
È possibile utilizzare la colonna centrale .small-centered classe. Medie e grandi attrezzature possono essere ereditate centrato dispositivi di piccole dimensioni, ma è necessario impostare la classe è centrata su grandi attrezzature .large-centered .
Esempi
<Div class = "piccoli-4 piccoli centrato colonne"> piccola-4 piccoli centrato </ div>
</ Div>
<Div class = "riga">
<Div class = "piccoli-6 piccoli centrato colonne"> piccolo-6 piccole centrato </ div>
</ Div>
<Div class = "riga">
<Div class = "piccoli-6 colonne grandi centrato"> piccolo-6 grandi centrato </ div>
</ Div>
<Div class = "riga">
<Div class = "piccoli-8 piccole centrato colonne di grandi uncentered"> piccolo-8 piccolo centrato su larga uncentered </ div>
</ Div>
<Div class = "riga">
<Div class = "piccoli-10 piccole centrato colonne"> piccola-10 piccola centrato </ div>
</ Div>
Prova »
colonna Offset
È possibile utilizzare .large-offset-* (o .small-offset-* ) di classe, impostare la colonna a destra. Il numero di colonne sul margine sinistro del controllo utilizzando un asterisco:
Esempi
<Div class = "grandi-1 colonne"> 1 </ div>
<Div class = "grandi-11 colonne"> 11 </ div>
</ Div>
<Div class = "riga">
<Div class = "grandi-1 colonne"> 1 </ div>
<Div class = "grandi-10 grandi-offset-1 colonne"> 10, Offset 1 </ div>
</ Div>
<Div class = "riga">
<Div class = "grandi-1 colonne"> 1 </ div>
<Div class = "grandi-9 grandi-offset-2 colonne"> 9, offset 2 </ div>
</ Div>
<Div class = "riga">
<Div class = "grandi-1 colonne"> 1 </ div>
<Div class = "grandi-8 grandi-offset-3 colonne"> 8, compensato 3 </ div>
</ Div>
Prova »
colonna incompleta
Se il numero di colonna della riga e non 12, Fondazione saranno automaticamente l'ultimo al galleggiante destra, e un vuoto per riempire le colonne restanti.
Opzioni .end categoria di elementi per l'ultimo set al galleggiante di sinistra:
Esempi
<div class = "medio-3 colonne"> .medium-3 </ div>
<div class = "medio-3 colonne"> .medium-3 </ div>
<div class = "medio-3 colonne"> .medium-3 </ div>
</ Div>
<Div class = "riga">
<div class = "medio-3 colonne"> .medium-3 </ div>
<div class = "medio-3 colonne"> .medium-3 </ div>
<Div class = "medio-3 colonne finiscono"> .medium-3 .end </ div>
</ Div>
Widescreen
Griglia ( .row ) Dimensione massima (max-width) è 62.5rem. Su Widescreen dimensioni può essere maggiore di 62.5rem, questa colonna non sarà riempimento completo della pagina, anche se la larghezza è impostato al 100%. Ma siamo in grado di impostare un nuovo max-width tramite CSS:
Se si desidera utilizzare il max-width predefinita, ma il colore di sfondo della pagina, tra l'intero, quindi si utilizza il elemento contenitore .row di classe, ed è necessario specificare un colore di sfondo:
Esempi
<Div class = "riga">
<Div class = "piccoli-6 colonne" style = "background-color: yellow;"> .small-6 </ div>
<Div class = "piccoli-6 colonne" style = "background-color: rosa;"> .small-6 </ div>
</ Div>
</ Div>
Prova »