Sistema de red
Utilice nuestra potente cuadrícula flexbox para dispositivos móviles para crear diseños de todas las formas y tamaños gracias a un sistema de doce columnas, cinco niveles de respuesta predeterminados, variables Sass y mixins, y docenas de clases predefinidas.
Cómo funciona
El sistema de cuadrícula de Bootstrap utiliza una serie de contenedores, filas y columnas para diseñar y alinear el contenido. Está construido con flexbox y es totalmente receptivo. A continuación se muestra un ejemplo y una mirada en profundidad a cómo se une la cuadrícula.
¿Nuevo o no familiarizado con flexbox? Lea esta guía de CSS Tricks flexbox para conocer los antecedentes, la terminología, las pautas y los fragmentos de código.
El ejemplo anterior crea tres columnas de igual ancho en dispositivos pequeños, medianos, grandes y extragrandes utilizando nuestras clases de cuadrícula predefinidas. Esas columnas están centradas en la página con el padre .container
.
Desglosándolo, así es como funciona:
- Los contenedores proporcionan un medio para centrar y rellenar horizontalmente el contenido de su sitio. Úselo
.container
para un ancho de píxel receptivo o.container-fluid
parawidth: 100%
todos los tamaños de ventana gráfica y dispositivo. - Las filas son envoltorios para las columnas. Cada columna tiene una horizontal
padding
(llamada canaleta) para controlar el espacio entre ellas. Estopadding
luego se contrarresta en las filas con márgenes negativos. De esta manera, todo el contenido de sus columnas se alinea visualmente en el lado izquierdo. - En un diseño de cuadrícula, el contenido debe colocarse dentro de las columnas y solo las columnas pueden ser elementos secundarios inmediatos de las filas.
- Gracias a flexbox, las columnas de la cuadrícula sin especificar se diseñarán
width
automáticamente como columnas de igual ancho. Por ejemplo, cuatro instancias de.col-sm
tendrán automáticamente un 25 % de ancho desde el punto de interrupción pequeño en adelante. Consulte la sección de columnas de diseño automático para obtener más ejemplos. - Las clases de columna indican la cantidad de columnas que le gustaría usar de las 12 posibles por fila. Entonces, si desea tres columnas de igual ancho, puede usar
.col-4
. - Las columnas
width
se establecen en porcentajes, por lo que siempre son fluidas y tienen un tamaño relativo a su elemento principal. - Las columnas tienen horizontal
padding
para crear los canalones entre columnas individuales, sin embargo, puede eliminar lasmargin
filas y laspadding
columnas con.no-gutters
el.row
. - Para que la cuadrícula responda, hay cinco puntos de interrupción de la cuadrícula, uno para cada punto de interrupción receptivo : todos los puntos de interrupción (extra pequeño), pequeño, mediano, grande y extra grande.
- Los puntos de interrupción de cuadrícula se basan en consultas de medios de ancho mínimo, lo que significa que se aplican a ese punto de interrupción y a todos los que están por encima (por ejemplo,
.col-sm-4
se aplica a dispositivos pequeños, medianos, grandes y extra grandes, pero no al primer punto dexs
interrupción). - Puede usar clases de cuadrícula predefinidas (como
.col-4
) o mixins de Sass para un marcado más semántico.
Tenga en cuenta las limitaciones y los errores relacionados con flexbox , como la incapacidad de usar algunos elementos HTML como contenedores flexibles .
Opciones de cuadrícula
Mientras que Bootstrap usa em
s o rem
s para definir la mayoría de los tamaños, px
s se usa para los puntos de interrupción de la cuadrícula y los anchos de los contenedores. Esto se debe a que el ancho de la ventana gráfica está en píxeles y no cambia con el tamaño de la fuente .
Vea cómo funcionan los aspectos del sistema de cuadrícula Bootstrap en múltiples dispositivos con una tabla práctica.
Muy pequeño <576 px |
Pequeño ≥576px |
Medio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|
---|---|---|---|---|---|
Ancho máximo del contenedor | Ninguno (automático) | 540px | 720px | 960px | 1140px |
Prefijo de clase | .col- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
# de columnas | 12 | ||||
Ancho del canalón | 30px (15px en cada lado de una columna) | ||||
encajable | Sí | ||||
Ordenación de columnas | Sí |
Columnas de diseño automático
Utilice clases de columna específicas de punto de interrupción para cambiar fácilmente el tamaño de la columna sin una clase numerada explícita como .col-sm-6
.
ancho igual
Por ejemplo, aquí hay dos diseños de cuadrícula que se aplican a cada dispositivo y ventana gráfica, de xs
a xl
. Agregue cualquier número de clases sin unidades para cada punto de interrupción que necesite y cada columna tendrá el mismo ancho.
Multilínea de igual ancho
Cree columnas de igual ancho que abarquen varias líneas insertando un .w-100
lugar donde desea que las columnas se dividan en una nueva línea. Haga que los descansos sean receptivos mezclándolos .w-100
con algunas utilidades de visualización receptivas .
Hubo un error de Safari Flexbox que impidió que esto funcionara sin un archivo explícito flex-basis
o border
. Existen soluciones para versiones anteriores de navegadores, pero no deberían ser necesarias si los navegadores de destino no tienen versiones con errores.
Establecer un ancho de columna
El diseño automático para las columnas de cuadrícula de Flexbox también significa que puede establecer el ancho de una columna y hacer que las columnas hermanas cambien de tamaño automáticamente a su alrededor. Puede usar clases de cuadrícula predefinidas (como se muestra a continuación), combinaciones de cuadrícula o anchos en línea. Tenga en cuenta que las otras columnas cambiarán de tamaño sin importar el ancho de la columna central.
Contenido de ancho variable
Use col-{breakpoint}-auto
clases para dimensionar columnas según el ancho natural de su contenido.
Clases receptivas
La cuadrícula de Bootstrap incluye cinco niveles de clases predefinidas para crear diseños receptivos complejos. Personalice el tamaño de sus columnas en dispositivos extra pequeños, pequeños, medianos, grandes o extra grandes como mejor le parezca.
Todos los puntos de interrupción
Para cuadrículas que son iguales desde el dispositivo más pequeño hasta el más grande, use las clases .col
y . .col-*
Especifique una clase numerada cuando necesite una columna de tamaño particular; de lo contrario, siéntete libre de apegarte a .col
.
Apilado a horizontal
Con un solo conjunto de .col-sm-*
clases, puede crear un sistema de cuadrícula básico que comienza apilado y se vuelve horizontal en el punto de interrupción pequeño ( sm
).
Mezclar y combinar
¿No quiere que sus columnas simplemente se apilen en algunos niveles de cuadrícula? Use una combinación de diferentes clases para cada nivel según sea necesario. Vea el ejemplo a continuación para tener una mejor idea de cómo funciona todo.
canalones
Los canalones se pueden ajustar de manera receptiva mediante el relleno específico del punto de interrupción y las clases de utilidad de margen negativo. Para cambiar los canalones en una fila determinada, empareje una utilidad de margen negativo en el .row
y las utilidades de relleno correspondientes en el .col
s. Es posible que también sea necesario ajustar el padre .container
o para evitar un desbordamiento no deseado, utilizando nuevamente la utilidad de relleno coincidente..container-fluid
Este es un ejemplo de cómo personalizar la cuadrícula de Bootstrap en el lg
punto de interrupción grande ( ) y superior. Hemos aumentado el .col
relleno con .px-lg-5
, lo hemos contrarrestado con .mx-lg-n5
el padre .row
y luego hemos ajustado el .container
envoltorio con .px-lg-5
.
Columnas de fila
Use las .row-cols-*
clases receptivas para establecer rápidamente la cantidad de columnas que mejor representen su contenido y diseño. Mientras que las clases normales .col-*
se aplican a las columnas individuales (p. ej., .col-md-4
), las clases de columnas de fila se establecen en el padre .row
como acceso directo.
Utilice estas clases de filas y columnas para crear rápidamente diseños de cuadrícula básicos o para controlar los diseños de sus tarjetas.
También puede usar el mixin de Sass que lo acompaña row-cols()
:
Alineación
Use las utilidades de alineación de flexbox para alinear columnas vertical y horizontalmente. Internet Explorer 10-11 no admite la alineación vertical de los elementos flexibles cuando el contenedor flexible tiene un min-height
como se muestra a continuación. Ver Flexbugs #3 para más detalles.
Alineamiento vertical
Alineación horizontal
Sin canaletas
Los canalones entre columnas en nuestras clases de cuadrícula predefinidas se pueden eliminar con .no-gutters
. margin
Esto elimina la s negativa .row
y la horizontal padding
de todas las columnas secundarias inmediatas.
Aquí está el código fuente para crear estos estilos. Tenga en cuenta que las anulaciones de columna se limitan solo a las primeras columnas secundarias y se orientan a través del selector de atributos . Si bien esto genera un selector más específico, el relleno de columnas aún se puede personalizar aún más con las utilidades de espaciado .
¿Necesita un diseño de borde a borde? Suelte el padre .container
o .container-fluid
.
En la práctica, así es como se ve. Tenga en cuenta que puede continuar usándolo con todas las demás clases de cuadrícula predefinidas (incluidos los anchos de columna, los niveles de respuesta, los reordenamientos y más).
Envoltura de columna
Si se colocan más de 12 columnas dentro de una sola fila, cada grupo de columnas adicionales se ajustará, como una unidad, a una nueva línea.
Dado que 9 + 4 = 13 > 12, este div de 4 columnas de ancho se envuelve en una nueva línea como una unidad contigua.
Las columnas subsiguientes continúan a lo largo de la nueva línea.
Saltos de columna
Dividir columnas en una nueva línea en flexbox requiere un pequeño truco: agregue un elemento width: 100%
donde quiera envolver sus columnas en una nueva línea. Normalmente, esto se logra con múltiples .row
s, pero no todos los métodos de implementación pueden dar cuenta de esto.
También puede aplicar esta interrupción en puntos de interrupción específicos con nuestras utilidades de visualización receptivas .
reordenando
ordenar clases
Usa .order-
clases para controlar el orden visual de tu contenido. Estas clases responden, por lo que puede establecer el order
punto de interrupción (por ejemplo, .order-1.order-md-2
). Incluye compatibilidad 1
con 12
los cinco niveles de cuadrícula.
También hay clases responsivas .order-first
y que cambian la forma de un elemento aplicando y ( ), respectivamente. Estas clases también se pueden mezclar con las clases numeradas según sea necesario..order-last
order
order: -1
order: 13
order: $columns + 1
.order-*
Columnas de compensación
Puede compensar las columnas de la cuadrícula de dos maneras: nuestras .offset-
clases de cuadrícula receptivas y nuestras utilidades de margen . Las clases de cuadrícula se dimensionan para que coincidan con las columnas, mientras que los márgenes son más útiles para diseños rápidos donde el ancho del desplazamiento es variable.
Clases de compensación
Mover columnas a la derecha usando .offset-md-*
clases. Estas clases aumentan el margen izquierdo de una columna por *
columnas. Por ejemplo, .offset-md-4
se mueve .col-md-4
sobre cuatro columnas.
Además de borrar las columnas en los puntos de interrupción de respuesta, es posible que deba restablecer las compensaciones. Vea esto en acción en el ejemplo de cuadrícula .
Utilidades de margen
Con el cambio a flexbox en v4, puede usar utilidades de margen como .mr-auto
para forzar que las columnas hermanas se separen entre sí.
Anidamiento
Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .row
conjunto de .col-sm-*
columnas dentro de una .col-sm-*
columna existente. Las filas anidadas deben incluir un conjunto de columnas que suman 12 o menos (no es necesario que use las 12 columnas disponibles).
mezclas descaradas
Al usar los archivos Sass de origen de Bootstrap, tiene la opción de usar variables Sass y mixins para crear diseños de página personalizados, semánticos y receptivos. Nuestras clases de cuadrícula predefinidas utilizan estas mismas variables y combinaciones para proporcionar un conjunto completo de clases listas para usar para diseños de respuesta rápida.
Variables
Las variables y los mapas determinan el número de columnas, el ancho de medianil y el punto de consulta de medios en el que comienzan las columnas flotantes. Los usamos para generar las clases de cuadrícula predefinidas documentadas anteriormente, así como para los mixins personalizados que se enumeran a continuación.
mezclas
Los mixins se utilizan junto con las variables de cuadrícula para generar CSS semántico para columnas de cuadrícula individuales.
Ejemplo de uso
Puede modificar las variables a sus propios valores personalizados, o simplemente usar los mixins con sus valores predeterminados. Este es un ejemplo del uso de la configuración predeterminada para crear un diseño de dos columnas con un espacio entre ellas.
Personalización de la cuadrícula
Utilizando nuestras variables y mapas Sass de cuadrícula incorporados, es posible personalizar completamente las clases de cuadrícula predefinidas. Cambie la cantidad de niveles, las dimensiones de la consulta de medios y los anchos de los contenedores, luego vuelva a compilar.
Columnas y canaletas
El número de columnas de la cuadrícula se puede modificar mediante variables Sass. $grid-columns
se utiliza para generar los anchos (en porcentaje) de cada columna individual mientras $grid-gutter-width
establece el ancho de las medianeras de las columnas.
Niveles de cuadrícula
Yendo más allá de las columnas en sí, también puede personalizar la cantidad de niveles de cuadrícula. Si quisiera solo cuatro niveles de cuadrícula, actualizaría $grid-breakpoints
y $container-max-widths
a algo como esto:
Al realizar cambios en las variables o mapas de Sass, deberá guardar los cambios y volver a compilar. Al hacerlo, se generará un nuevo conjunto de clases de cuadrícula predefinidas para anchos de columna, compensaciones y ordenación. Las utilidades de visibilidad receptivas también se actualizarán para usar los puntos de interrupción personalizados. Asegúrese de establecer los valores de cuadrícula en px
(no rem
, em
o %
).