Ejemplos Fundación de cuadrícula
A continuación hemos recopilado algunos ejemplos de rejilla común.
Tres columnas iguales
Este ejemplo muestra cómo crear tres columnas iguales (33,3% / 33,3% / 33,3%), que muestra tres columnas en los equipos de media y gran escala, apilado automático en dispositivos pequeños:
Ejemplos
<Div class = "medio-4 columnas" style = "background-color: amarillo;">
<P> .medium-4 </ p>
</ Div>
<Div class = "medio-4 columnas" style = "background-color: rosa;">
<P> .medium-4 </ p>
</ Div>
<Div class = "medio-4 columnas" style = "background-color: amarillo;">
<P> .medium-4 </ p>
</ Div>
</ Div>
Trate »
Tres columnas desigual
Este ejemplo muestra cómo crear tres columnas desigual (25% / 50% / 25%), que muestra tres columnas en los equipos de media y gran escala, apilado automático en dispositivos pequeños:
Ejemplos
<Div class = "Medium-3 columnas" style = "background-color: amarillo;">
<P> .medium-3 </ p>
</ Div>
<Div class = "medio-6 columnas" style = "background-color: rosa;">
<P> .medium-6 </ p>
</ Div>
<Div class = "Medium-3 columnas" style = "background-color: amarillo;">
<P> .medium-3 </ p>
</ Div>
</ Div>
Trate »
Dos columnas iguales
Este ejemplo muestra cómo crear dos columnas iguales (50% / 50%), la proporción de pequeñas, medianas y grandes equipos es siempre por encima de 50% / 50%:
Ejemplos
<Div class = "small-6 columnas" style = "background-color: amarillo;">
<P> .small-6 </ p>
</ Div>
<Div class = "small-6 estilo de columnas" = "background-color: rosa;">
<P> .small-6 </ p>
</ Div>
</ Div>
Trate »
Dos columnas desiguales
Este ejemplo muestra cómo crear dos columnas desiguales (33,3% / 66,6%), la proporción de pequeñas, medianas y grandes equipos es siempre por encima de 33,3% / 66,6%:
Ejemplos
<Div class = "small-8 columnas" style = "background-color: amarillo;">
<P> .small-8 </ p>
</ Div>
<Div class = "small-4 estilo de columnas" = "background-color: rosa;">
<P> .small-4 </ p>
</ Div>
</ Div>
Trate »
Modificar el orden de las columnas
Mediante el uso de .small|medium|large-push-* y .small|medium|large-pull-* clase para modificar el orden de las columnas:
Ejemplos
<Div class = "pequeños-4 columnas pequeñas-8-push" style = "background-color: amarillo;">
<P> .small-4 .small- 8-push </ p>
</ Div>
<Div class = "pequeños-8 columnas-4-pull pequeña" style = "background-color: rosa;">
<P> .small-8 .small- 4-pull </ p>
</ Div>
</ Div>
Trate »
columna anidada
Puede utilizar mallas anidadas (columna inserto de columna):
Ejemplos
<Div class = "small-8 columnas"> .small-8
<Div class = "fila">
<Div class = "small-8 columnas"> .small-8 anidada
<Div class = "fila">
<Div class = "small-8 columnas"> .small-8 anidada Una vez más </ div>
<Div class = "small-4 columnas"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 columnas"> .small-4 </ div>
</ Div>
</ Div>
<Div class = "small-4 columnas"> .small-4 </ div>
</ Div>
Trate »
Mixto: móviles, de escritorio,
sistema de rejilla Fundación tiene tres columnas: .small-* (teléfono celular), .medium-* (plana), y .large-* (de escritorio). Estas clases pueden utilizarse de forma dinámica en combinación, hacer el diseño más flexible:
Consejo: Cada clase se puede ampliar, si desea que el ancho de la pequeña y gran pantalla de dispositivo se puede configurar como se especifica .small-* .
Ejemplos
<Div class = "pequeñas-6 grandes columnas-8"> .small-6 .large-8 </ div>
<Div class = "pequeñas-6 grandes columnas-4"> .small-6 .large-4 </ div>
</ Div>
<Div class = "fila">
<Div class = "pequeñas-2 grandes columnas-4"> .small-2 .large-2 </ div>
<Div class = "pequeños-4 grandes columnas-4"> .small-4 .large-2 </ div>
<Div class = "pequeñas-6 grandes columnas-4"> .small-6 .large-2 </ div>
</ Div>
<Div class = "fila">
<Div class = "pequeñas-3 grandes columnas-5"> .small-3 .large-5 </ div>
<Div class = "pequeños-9 grandes-7 columnas"> .small-9 .large-7 </ div>
</ Div>
Trate »
Mixto: móviles, tabletas y dispositivos de escritorio
Ejemplos
<Div class = "medio-6 grandes columnas-8"> .medium-6 .large-8 </ div>
<Div class = "medio-6 grandes columnas-4"> .medium-6 .large-4 </ div>
</ Div>
<Div class = "fila">
<Div class = "pequeña-4 medianas-3-7 grandes columnas"> .small-4-3 .medium .large-7 </ div>
<Div class = "pequeña-4 medianas-grandes 6 3-columnas"> .small-4-6 .medium .large-3 </ div>
<Div class = "pequeña-4 medianas-3-2 grandes columnas"> .small-4-3 .medium .large-2 </ div>
</ Div>
Trate »
La columna central
Puede utilizar la columna central .small-centered clase. Medianas y grandes equipos pueden ser heredados centrado en dispositivos pequeños, pero hay que define la clase se centra en un equipo grande .large-centered .
Ejemplos
<Div class = "pequeños-4 -pequeñas columnas centrada"> pequeña-4-pequeña centrada </ div>
</ Div>
<Div class = "fila">
<Div class = "pequeñas-6 -pequeñas columnas centrada"> pequeña-6-pequeña centrada </ div>
</ Div>
<Div class = "fila">
<Div class = "pequeñas-6 columnas de gran centrada"> pequeña-6-grande centrada </ div>
</ Div>
<Div class = "fila">
<Div class = "pequeños-8 columnas pequeñas-grandes-centrada uncentered"> pequeña de 8 pequeña centrada en gran uncentered </ div>
</ Div>
<Div class = "fila">
<Div class = "pequeños-10 -pequeñas columnas centrada"> pequeña-10-pequeña centrada </ div>
</ Div>
Trate »
columna Offset
Puede utilizar .large-offset-* (o .small-offset-* ) de clase, establecer la columna de la derecha. El número de columnas en el lado izquierdo de control mediante un asterisco:
Ejemplos
<Div class = "large-1 columnas"> 1 </ div>
<Div class = "large-11 columnas"> 11 </ div>
</ Div>
<Div class = "fila">
<Div class = "large-1 columnas"> 1 </ div>
<Div class = "large-10 -grandes-1 columnas desplazamiento"> 10, compensado 1 </ div>
</ Div>
<Div class = "fila">
<Div class = "large-1 columnas"> 1 </ div>
<Div class = "large-9 -offset-2 grandes columnas"> 9, compensado 2 </ div>
</ Div>
<Div class = "fila">
<Div class = "large-1 columnas"> 1 </ div>
<Div class = "large-8 -grandes-3 columnas desplazamiento"> 8, compensado 3 </ div>
</ Div>
Trate »
columna incompleta
Si el número de columna de la fila y no 12, Fundación serán automáticamente el último en el flotador derecho, y un espacio en blanco para rellenar las columnas restantes.
Opciones .end categoría de elementos para el último set para el flotador izquierda:
Ejemplos
<div class = "medio-3 columnas"> .medium-3 </ div>
<div class = "medio-3 columnas"> .medium-3 </ div>
<div class = "medio-3 columnas"> .medium-3 </ div>
</ Div>
<Div class = "fila">
<div class = "medio-3 columnas"> .medium-3 </ div>
<div class = "medio-3 columnas"> .medium-3 </ div>
<Div class = "medio-3 columnas terminan"> .medium-3 .end </ div>
</ Div>
Widescreen
Rejilla ( .row ) Tamaño máximo (max-ancho) es 62.5rem. En Widescreen tamaño puede ser mayor que 62.5rem, esta columna no será llenado completo a la página, incluso si la anchura se establece en 100%. Sin embargo, podemos establecer un nuevo máximo de ancho a través de CSS:
Si desea utilizar el ancho máximo predeterminado, pero el color de fondo de entre toda la página, a continuación, se utiliza en el elemento contenedor .row clase, y es necesario especificar un color de fondo:
Ejemplos
<Div class = "fila">
<Div class = "small-6 columnas" style = "background-color: amarillo;"> .small-6 </ div>
<Div class = "small-6 columnas" style = "background-color: rosa;"> .small-6 </ div>
</ Div>
</ Div>
Trate »