¿Cómo funciona Bootstrap Grid?

El sistema de cuadrícula Bootstrap se basa en una cuadrícula de 12 columnas porque el número 12 es divisible por 12, 6, 4, 3, 2. Por lo tanto, el tamaño de las columnas dentro de cada fila deberá ser igual a 12. Esta matemática hace que la cuadrícula sea más flexible para un Amplia gama de diseños.

Aquí hay algunos ejemplos de clases para igualar 12

• Cuadrícula de 2 columnas
  .col-sm-6 + .col-sm-6 = 12
• Cuadrícula de proporción dorada de 2 columnas
  .col-sm-8 + .col-sm-4 = 12
• Cuadrícula de 3 columnas
  .col-sm-4 + .col-sm-4 + .col-sm-4 = 12

El sistema de cuadrícula Bootstrap tiene 3 partes principales: CRC

Al trabajar con la cuadrícula de la columna Bootstrap 12, debe tener en cuenta el orden de los elementos y que siempre hay tres partes: un contenedor de C , un flujo y cualquier número de columnas. CRC

Si desea que todo el contenido de su página esté limitado a un ancho máximo, solo necesitará un .container en toda su página. Luego, use una serie de bloques de filas con divisiones de columna para construir su cuadrícula. Si su diseño no tiene bandas de color horizontales, puede establecer .container en la etiqueta del cuerpo. Sin embargo, existe una tendencia a tener colores de fondo horizontales con el contenido establecido en un ancho máximo. La forma en que logro este efecto es usar una etiqueta de sección con un color de fondo establecido.

Familiarizado con una estructura de tabla HTML? El sistema de red Bootstrap 4 es muy similar.

Por ejemplo:

table > tr > td es como .container > .row > .col-sm-6

Las columnas también tienen niveles de cuadrícula que indican a las columnas cómo deben verse en los diferentes puntos de interrupción. En el siguiente ejemplo, utilicé .col-sm-6 que esencialmente dice: “Cuando la ventana del navegador sea de 576 px o más, haga que esta columna abarque 6 de las 12 columnas. Para cualquier cosa por debajo de 576 px, hágala de ancho completo ”. Entonces, cuando declara un nivel de cuadrícula, está diciendo que sea de este tamaño para el nivel especificado y en adelante .

Bootstrap 4 puntos de interrupción

xs = Extra pequeño <576px
sm = Pequeño ≥576px
md = Medio ≥768px
lg = Grande ≥992px
xl = Extra grande ≥1200px

Esta publicación entra en más detalles en la cuadrícula y proporciona algunos ejemplos de código.

El sistema de cuadrícula Bootstrap se basa en una cuadrícula de 12 columnas porque el número 12 es divisible por 12, 6, 4, 3, 2. Por lo tanto, el tamaño de las columnas dentro de cada fila deberá ser igual a 12. Esta matemática hace que la cuadrícula sea más flexible para un Amplia gama de diseños.

Aquí hay algunos ejemplos de clases para igualar 12

• Cuadrícula de 2 columnas

• Cuadrícula de proporción dorada de 2 columnas

• Cuadrícula de 3 columnas

¡Espero que esto te ayudará!

La cuadrícula es el elemento más útil de Bootstrap. Esta cuadrícula se puede utilizar de varias maneras. esta cuadrícula funciona mediante la consulta de medios css. También puede utilizar esta consulta de medios CSS en su tema de respuesta. Consulta de medios CSS trabajando el siguiente sistema.

/ * para 980 px o menos * /
@media screen y (ancho máximo: 990px) {

}

/ * para 700 px o menos * /
@media screen y (ancho máximo: 600px) {

}

/ * para 480px o menos * /
@media screen y (ancho máximo: 480px) {

}

Para obtener más detalles, puede consultar ver este video: Tutorial de Bootstrap 5: uso de la cuadrícula, tutorial de Bootstrap 4: explicación de la cuadrícula de Bootstrap

La cuadrícula Bootstrap funciona en el sistema basado en filas y columnas. Tiene clases predefinidas, solo tienes que usar esas clases para filas y columnas. Puede haber hasta 12 columnas por fila, el resto de combinaciones de columnas depende de los requisitos del usuario. Por ejemplo, si desea 3 secciones principales en una fila, cada columna debe tener una longitud de 4.

Sección1

Sección2

Sección3

La cuadrícula tiene un total de 12 cuadros seguidos.

El tamaño de esas cajas depende de dos clases div: contenedor o contenedor-fluido.

El contenedor básicamente dice: quiero 12 cuadros en mi fila, pero quiero esos cuadros centrados en el medio de mi página y solo debe tener aproximadamente 3/4 del ancho de la página.

El fluido del contenedor dice: Quiero las 12 cajas en mi fila, pero quiero que todas esas cajas espaciadas de manera uniforme toquen los lados izquierdo y derecho de mi pantalla.

Cuando haces una nueva fila, le dice a bootstrap que quieres un nuevo conjunto de 12 cajas (hipotéticamente).

Es por eso que a menudo ves esto:

Eso significa que habría dos secciones en ese sitio web.

Ahora, dentro de esas filas tienes que decirle a bootstrap cómo usar esas filas.

Todos los cuadros deben sumar 12.

Las clases distinguen entre xs, sm, md y lg.

Tu puedes hacer:

Y si hiciste 2 más de esos divs dentro de un div de fila, entonces tu contenido estaría espaciado uniformemente en 12 cajas en 3 cajas.

Eso es porque 12/4 = 3.

Puede crear una nueva fila agregando la clase “fila” a un div. En este div para elegir cómo dividir las columnas gracias a la clase “col”. Todo se explica aquí:

CSS · Bootstrap 🙂