TechBlogSD - Todo para WordPress y desarrollo WEB
Instrucciones de WEB y WordPress, noticias, reseñas de temas y complementos

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

1.027

Bootstrap 5 ofrece un poderoso sistema de diseño de cuadrícula que ayuda a crear diseños amigables para dispositivos móviles fácilmente. Hay seis puntos de interrupción de respuesta para diferentes tamaños de dispositivos en el sistema de diseño de cuadrícula Bootstrap. Hay 12 columnas en cada una y al mezclar y combinar, puede crear diferentes diseños que desee. El sistema de rejilla se basa en una caja flexible y es totalmente sensible.

Tutorial de diseño de cuadrícula de Bootstrap 5

Este tutorial contiene los siguientes temas:

  1. Conceptos básicos de diseño de cuadrícula
  2. Sistema de red de nivel 5
  3. Cuadrícula simple de igual ancho
  4. Un ancho de columna y cambiar el tamaño de otras columnas
  5. Contenido de ancho variable
  6. Cuadrícula de múltiples filas de igual ancho
  7. Cuadrícula horizontal apilada
  8. Alineamiento vertical
  9. Alineación horizontal
  10. Cuadrícula sin canalones
  11. Cuadrícula de columna envuelta
  12. Reordenación del contenido de la columna dentro de la cuadrícula
  13. Desplazamiento de columna
  14. Anidado dentro de la cuadrícula

1 Conceptos básicos del sistema de cuadrícula Bootstrap

El sistema de cuadrícula utiliza tres clases CSS principales para crear el diseño necesario: .container, .row y .col. El contenedor cubre el diseño completo y luego las filas y luego las columnas.

  • Utilice la clase .container para centrar el contenido con ancho fijo y .container-fluid para un diseño de ancho completo sensible.
  • Puede usar la clase .row para incluir todas las columnas horizontales divididas en 12 de igual ancho.
  • Coloque el contenido real dentro de las columnas usando las clases .col o .col- *. Por ejemplo, una fila puede contener dos columnas como .col-8 + .col-4. La columna debe ser el hijo inmediato de la clase de fila.
  • Todas las columnas usan flexbox, lo que significa que el uso simple de la clase .col dividirá la fila en columnas de igual ancho. Por ejemplo, cuando usa dos clases .col dentro de una fila, se dividirá automáticamente en dos áreas al 50%.
  • Puede definir explícitamente el ancho de columna como .col-sm-8 que ocupará 3/4 (75%) del ancho de la fila.
  • Por defecto, las columnas y filas tienen relleno y margen para una mejor visibilidad. Puede eliminar el margen y el relleno agregando una clase adicional ".noglutter" con ".row".
  • Bootstrap 5 ofrece seis puntos de interrupción: extra pequeño (xs), pequeño (sm), mediano (md), grande (lg), extra grande (xl) y extra extra grande (xxl).
  • Todos los niveles de puntos de interrupción utilizan de forma predeterminada la clase .col. Cualquier otra clase utilizada se aplicará a todos los dispositivos de nivel superior. Por ejemplo, .col-sm-4 (pequeño) se aplicará a dispositivos pequeños, medianos, grandes y extra grandes.

2 Sistema de cuadrícula de nivel 6

La siguiente tabla muestra los seis niveles de puntos de interrupción que se ofrecen en Bootstrap 5:

Red Extra Pequeño Pequeña Medio Grande Extra grande Extra Extra Large
Breakpoint <576 px ≥576px ≥768px ≥992px ≥1200px ≥1400px
Clase CSS .con el- .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-
Ancho máximo del contenedor Ninguno (automático) 540 px 720px 960 px 1140px 1320px
  • Columnas: cada fila se divide en 12 columnas de igual ancho.
  • Ancho de la canaleta: 15 píxeles a cada lado de la columna con un total de 30 píxeles.
  • Anidamiento: sí, las columnas se pueden anidar dentro de otra columna.
  • Orden de columnas: sí, el contenido dentro de cualquiera de las columnas dentro de una fila se puede reordenar.

Muestremos diferentes ejemplos para entender mejor las cuadrículas:

3 Cuadrícula simple de igual ancho

Cree una cuadrícula simple con columnas iguales simplemente usando clases ".col". Cuando se utilizan clases ".col", la fila se dividirá automáticamente en columnas de igual ancho. Por ejemplo, cuando utilice dos clases “.col", la fila se dividirá en dos columnas 1/2 + 1/2. A continuación se muestra un ejemplo de códigos para crear columnas 1/2 + 1/2 y 1/3 + 1/3 + 1/3 usando clases simples “.col”.

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div> </div>

Las columnas iguales se mostrarán en el navegador como se muestra a continuación:

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

4 El ancho de una columna y cambiar el tamaño de otras columnas

El sistema de cuadrícula Bootstrap le permite definir el ancho de una columna y las columnas restantes dentro de la misma fila se ajustarán automáticamente. Por ejemplo, cuando define "col + col-6 + col" en una fila, se dividirá automáticamente como columnas "1/3 + 1/6 + 1/3". A continuación se muestran dos ejemplos para definir una columna y luego las otras dos columnas restantes se ajustarán en consecuencia.

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

A continuación se muestra el código para ajustar las columnas que rodean la columna con el ancho definido:

<div class="container"> <div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 </div> <div class="col"> .col </div> </div> </div>

5 Contenido de ancho variable

El ancho de las columnas se puede restringir al contenido real usando la clase “.col- {breakpoint} -auto”, por ejemplo, “.col-md-auto”.

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

Las columnas del medio en el ejemplo anterior se ajustan automáticamente al ancho del contenido. A continuación se muestra el código para el diseño de cuadrícula anterior:

<div class="container"> <div class="row justify-content-md-center"> <div class="col col-lg-2"> .col .col-lg-2 </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-md-auto"> .col-md-auto (variable width) </div> <div class="col col-lg-2"> .col .col-lg-2 </div> </div> </div>

Cuadrícula de 6 filas múltiples de igual ancho

Simplemente cree un diseño de columnas múltiples dentro de una fila usando clases ".col" continuamente. Solo necesita insertar la clase ".w-100" donde se requiere un punto de interrupción.

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

A continuación se muestra el código para crear varias filas de igual ancho utilizando una sola clase de "fila".

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> <div class="w-100"></div> <div class="col">.col</div> <div class="col">.col</div> </div>

7 cuadrícula horizontal apilada

Puede crear un diseño de cuadrícula apilada utilizando las clases ".col-sm-" que se expandirán a una cuadrícula horizontal en el escritorio.

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

A continuación se muestra el código para crear un diseño de cuadrícula horizontal apilada como se muestra arriba.

<div class="row"> <div class="col-sm-8">.col-sm-8</div> <div class="col-sm-4">.col-sm-4</div> </div> <div class="row"> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> <div class="col-sm">.col-sm</div> </div>

8 Alineación vertical

La alineación vertical del contenido dentro de una columna se puede ajustar agregando una de las siguientes tres clases con la clase ".row" como se muestra a continuación:

<div class="row align-items-start"> - Align content vertical top <div class="row align-items-center"> - Align content vertical middle <div class="row align-items-end"> - Align content vertical bottom

9 Alineación horizontal

De manera similar a la alineación vertical, también puede ajustar la alineación horizontal de las columnas como se muestra a continuación:

<div class="container"> <div class="row justify-content-start"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-center"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-end"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-around"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> <div class="row justify-content-between"> <div class="col-4"> .col-4 </div> <div class="col-4"> .col-4 </div> </div> </div>

Esto producirá el siguiente resultado en el navegador:

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

10 rejilla sin canalones

Por defecto, las columnas tendrán relleno horizontal y las filas tendrán márgenes horizontales negativos para una mejor alineación. Puede eliminar esos márgenes y rellenos utilizando la clase "sin canalones" con "fila" como se muestra a continuación.

<div class="row no-gutters"> <div class="col-12 col-sm-6 col-md-8">.col-12 .col-sm-6 .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div>

Producirá el siguiente resultado:

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

11 cuadrícula de columna envuelta

Cuando tenga más de 12 columnas en una fila, las columnas se ajustarán automáticamente a la siguiente fila. Por ejemplo, con lo siguiente, las dos primeras columnas encajarán en la primera fila (9 + 2 = 11) mientras que la tercera y cuarta columnas se ajustarán a la nueva línea.

<div class="row"> <div class="col-9">.col-9 (Row 1)</div> <div class="col-2">.col-2 (Row 1)</div> <div class="col-4">.col-4 (Row 1)</div> <div class="col-5">.col-5 (Row 1)</div> </div>

Las columnas envueltas se verán a continuación:

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

Reordenación del contenido de 12 columnas dentro de la cuadrícula

Bootstrap le permite reordenar el contenido de una columna independientemente de la posición en una fila. Por ejemplo, hay tres columnas utilizadas en el diseño de cuadrícula a continuación.

<div class="container"> <div class="row"> <div class="col"> First .col No order </div> <div class="col order-12"> Second .col .order-12 moved to last </div> <div class="col order-1"> Third .col .order-1 moved to first </div> </div> </div>

El resultado se ve a continuación, sin ninguna columna ordenada, tendrá prioridad sobre todas las demás columnas ordenadas y se mostrará en la primera columna. El contenido dentro de la columna que usa la clase "order-12" se moverá a la última posición. Y el contenido dentro de la columna que usa "order-1" se moverá a la posición central (primera).

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

Desplazamiento de 13 columnas

Desde Bootstrap 4, eliminaron la función de compensación de columna debido al uso del diseño de cuadrícula de flexbox. Pero aún puede mover las columnas usando clases de utilidad de margen como "ml-auto", "mr-auto", etc.

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 ml-auto">.col-md-4 .ml-auto</div> </div> <div class="row"> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> <div class="col-md-3 ml-md-auto">.col-md-3 .ml-md-auto</div> </div> <div class="row"> <div class="col-auto mr-auto">.col-auto .mr-auto</div> <div class="col-auto">.col-auto</div> </div>

A continuación se muestra el resultado de la compensación de la columna utilizando clases de margen:

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

14 Anidamiento dentro de la cuadrícula

También puede anidar las columnas dentro de otras columnas como se muestra a continuación:

<div class="row"> <div class="col-sm-9"> Level 1: .col-sm-9 <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

Producirá el siguiente resultado:

¿Cómo usar los diseños de cuadrícula de Bootstrap 5?

Conclusión

Como puede ver, hay muchos diseños predeterminados que puede crear con el sistema de diseño de cuadrícula Bootstrap 5. También es posible crear CSS personalizado para crear diseños personalizados o modificar uno de los diseños predeterminados. El sólido diseño de cuadrícula de flexbox y los componentes reutilizables hacen que Bootstrap 5 sea más fuerte que la versión anterior.


Aprenda Bootstrap 5 (índice )


Fuente de grabación: www.webnots.com

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More