Cuadrícula Bootstrap 5

Sistema de cuadrícula Bootstrap 5

El sistema de rejilla de Bootstrap se construye con flexbox, permitiendo hasta 12 columnas en la página.

Si no desea usar todas las 12 columnas por separado, puede combinar estas columnas para crear columnas más anchas:

span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1 span 1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12

El sistema de rejilla es rápido en respuesta, las columnas se reordenan automáticamente según el tamaño de la pantalla.

Asegúrese de que la suma sea igual o menor a 12 (si no se utilizan todos los 12 columnas disponibles).

Clases de rejilla

El sistema de rejilla de Bootstrap 5 tiene seis clases:

  • .col- (dispositivos ultrapequeños - anchura de pantalla menor a 576px)
  • .col-sm- (dispositivos pequeños - anchura de pantalla igual o mayor a 576px)
  • .col-md- (dispositivos medianos - anchura de pantalla igual o mayor a 768 píxeles)
  • .col-lg- (dispositivos grandes - anchura de pantalla igual o mayor a 992 píxeles)
  • .col-xl- (dispositivos xlarge - anchura de pantalla igual o mayor a 1200px)
  • .col-xxl- (dispositivos xxlarge - anchura de pantalla igual o mayor a 1400px)

Puede combinar las clases anteriores para crear un diseño más dinámico y flexible.

Consejo:Cada clase se amplía en proporción, por lo que si desea sm y md Para establecer anchos iguales, simplemente especifique sm.

Estructura básica de Bootstrap 5

A continuación se muestra la estructura básica de la rejilla de Bootstrap 5:

<!-- Controlar el ancho de las columnas y cómo se muestran en diferentes dispositivos -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<!-- O deja que Bootstrap maneje automáticamente el diseño -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Primer ejemplo: crear una fila (<div class="row">). Luego, agrega el número necesario de columnas (con las etiquetas adecuadas .col-*-* etiqueta de clase). El primer asterisco (*) representa la respuesta: sm, md, lg, xl o xxl, y el segundo asterisco representa el número, la suma de cada fila debe ser 12.

Segundo ejemplo: no se le da a cada col Añadir un número, en su lugar, deja que bootstrap maneje el diseño para crear columnas iguales: dos "col" Elemento = cada col tiene un ancho del 50%, mientras que tres cols = cada col tiene un ancho del 33.33%. Cuatro columnas = 25% de ancho, etc. También puedes usar .col-sm|md|lg|xl|xxl Hacer que las columnas sean responsivas.

A continuación, hemos recopilado algunos ejemplos básicos de diseño de cuadrícula de Bootstrap 5.

Columnas divididas en tres partes

El siguiente ejemplo muestra cómo crear tres columnas iguales en todos los dispositivos y anchos de pantalla:

Ejemplo

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

Prueba personalmente

Columnas responsivas

El siguiente ejemplo muestra cómo crear cuatro columnas iguales desde una tableta y luego expandirlas a un escritorio ultraancho.En teléfonos o pantallas con anchos menores de 576px, las columnas se apilarán automáticamente:

Ejemplo

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

Prueba personalmente

Columnas responsivas desiguales

El siguiente ejemplo muestra cómo obtener dos columnas de diferentes anchos en una tableta y expandirlas a un escritorio ultraancho:

Ejemplo

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

Prueba personalmente

Consejo:Aprenderás más sobre esto en el tutorial más adelante Sistema de cuadrícula . Más contenido.