Sistema de red

Ejemplo

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 explicación detallada de cómo se une el sistema de red.

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

El ejemplo anterior crea tres columnas de igual ancho en todos los dispositivos y ventanas gráficas utilizando nuestras clases de cuadrícula predefinidas. Esas columnas están centradas en la página con el padre .container.

Cómo funciona

Desglosándolo, así es como se une el sistema de cuadrícula:

• Nuestra cuadrícula admite seis puntos de interrupción de respuesta . Los puntos de interrupción se basan en min-widthconsultas de medios, lo que significa que afectan a ese punto de interrupción ya todos los que están por encima (por ejemplo, .col-sm-4se aplica a sm, md, lg, xly xxl). Esto significa que puede controlar el tamaño y el comportamiento del contenedor y la columna en cada punto de interrupción.

• Los contenedores centran y rellenan horizontalmente su contenido. Úselo .containerpara un ancho de píxel receptivo, .container-fluidpara width: 100%todas las ventanas gráficas y dispositivos, o un contenedor receptivo (p. ej., .container-md) para una combinación de anchos fluidos y de píxel.

• Las filas son envoltorios para las columnas. Cada columna tiene una horizontal padding(llamada canaleta) para controlar el espacio entre ellas. Luego, esto paddingse contrarresta en las filas con márgenes negativos para garantizar que el contenido de sus columnas esté alineado visualmente en el lado izquierdo. Las filas también admiten clases de modificadores para aplicar de manera uniforme el tamaño de las columnas y las clases de medianil para cambiar el espaciado de su contenido.

• Las columnas son increíblemente flexibles. Hay 12 columnas de plantilla disponibles por fila, lo que le permite crear diferentes combinaciones de elementos que abarcan cualquier número de columnas. Las clases de columna indican el número de columnas de la plantilla que abarcan (por ejemplo, col-4abarca cuatro). widthLos s se establecen en porcentajes para que siempre tenga el mismo tamaño relativo.

• Los canalones también son receptivos y personalizables. Las clases de medianil están disponibles en todos los puntos de interrupción, con los mismos tamaños que nuestro margen y espaciado de relleno . Cambie los canales horizontales con .gx-*clases, los canales verticales con .gy-*o todos los canales con .g-*clases. .g-0también está disponible para quitar canaletas.

• Las variables Sass, los mapas y los mixins alimentan la cuadrícula. Si no desea usar las clases de cuadrícula predefinidas en Bootstrap, puede usar el Sass fuente de nuestra cuadrícula para crear el suyo propio con más marcado semántico. También incluimos algunas propiedades personalizadas de CSS para consumir estas variables de Sass para una mayor flexibilidad para usted.

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

El sistema de cuadrícula de Bootstrap puede adaptarse a los seis puntos de interrupción predeterminados y a cualquier punto de interrupción que personalice. Los seis niveles de cuadrícula predeterminados son los siguientes:

• Extra pequeño (xs)
• Pequeño (pequeño)
• Medio (md)
• Grande (largo)
• Extra grande (xl)
• Extra extra grande (xxl)

Como se indicó anteriormente, cada uno de estos puntos de interrupción tiene su propio contenedor, prefijo de clase único y modificadores. Así es como cambia la cuadrícula en estos puntos de interrupción:

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 xsa xxl. Agregue cualquier número de clases sin unidades para cada punto de interrupción que necesite y cada columna tendrá el mismo ancho.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 2
    </div>
    <div class="col">
      2 of 2
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col">
      2 of 3
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

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.

<div class="container">
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-6">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-5">
      2 of 3 (wider)
    </div>
    <div class="col">
      3 of 3
    </div>
  </div>
</div>

Contenido de ancho variable

Use col-{breakpoint}-autoclases para dimensionar columnas según el ancho natural de su contenido.

<div class="container">
  <div class="row justify-content-md-center">
    <div class="col col-lg-2">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
  <div class="row">
    <div class="col">
      1 of 3
    </div>
    <div class="col-md-auto">
      Variable width content
    </div>
    <div class="col col-lg-2">
      3 of 3
    </div>
  </div>
</div>

Clases receptivas

La cuadrícula de Bootstrap incluye seis 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 .coly . .col-*Especifique una clase numerada cuando necesite una columna de tamaño particular; de lo contrario, siéntete libre de apegarte a .col.

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

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).

<div class="container">
  <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>
</div>

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.

<div class="container">
  <!-- Stack the columns on mobile by making one full-width and the other half-width -->
  <div class="row">
    <div class="col-md-8">.col-md-8</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
  <div class="row">
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
    <div class="col-6 col-md-4">.col-6 .col-md-4</div>
  </div>

  <!-- Columns are always 50% wide, on mobile and desktop -->
  <div class="row">
    <div class="col-6">.col-6</div>
    <div class="col-6">.col-6</div>
  </div>
</div>

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 .rowcomo valor predeterminado para las columnas contenidas. Con .row-cols-autousted puede dar a las columnas su ancho natural.

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 y anularlos cuando sea necesario a nivel de columna.

<div class="container">
  <div class="row row-cols-2">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-auto">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-6">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-1 row-cols-sm-2 row-cols-md-4">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
  </div>
</div>

<div class="container">
  <div class="row row-cols-2 row-cols-lg-3">
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
    <div class="col-4 col-lg-2">Column</div>
  </div>
</div>

También puede usar el mixin de Sass que lo acompaña row-cols():

.element {
  // Three columns to start
  @include row-cols(3);

  // Five columns from medium breakpoint up
  @include media-breakpoint-up(md) {
    @include row-cols(5);
  }
}

Anidamiento

Para anidar su contenido con la cuadrícula predeterminada, agregue un nuevo .rowconjunto 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).

<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Level 1: .col-sm-3
    </div>
    <div class="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>
</div>

Hablar con descaro a

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.

$grid-columns:      12;
$grid-gutter-width: 1.5rem;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1140px,
  xxl: 1320px
);

mezclas

Los mixins se utilizan junto con las variables de cuadrícula para generar CSS semántico para columnas de cuadrícula individuales.

// Creates a wrapper for a series of columns
@include make-row();

// Make the element grid-ready (applying everything but the width)
@include make-col-ready();

// Without optional size values, the mixin will create equal columns (similar to using .col)
@include make-col();
@include make-col($size, $columns: $grid-columns);

// Get fancy by offsetting, or changing the sort order
@include make-col-offset($size, $columns: $grid-columns);

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.

.example-container {
  @include make-container();
  // Make sure to define this width after the mixin to override
  // `width: 100%` generated by `make-container()`
  width: 800px;
}

.example-row {
  @include make-row();
}

.example-content-main {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(8);
  }
}

.example-content-secondary {
  @include make-col-ready();

  @include media-breakpoint-up(sm) {
    @include make-col(6);
  }
  @include media-breakpoint-up(lg) {
    @include make-col(4);
  }
}

<div class="example-container">
  <div class="example-row">
    <div class="example-content-main">Main content</div>
    <div class="example-content-secondary">Secondary content</div>
  </div>
</div>

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-columnsse utiliza para generar los anchos (en porcentaje) de cada columna individual mientras $grid-gutter-widthestablece el ancho de las medianeras de las columnas.

$grid-columns: 12 !default;
$grid-gutter-width: 1.5rem !default;

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-breakpointsy $container-max-widthsa algo como esto:

$grid-breakpoints: (
  xs: 0,
  sm: 480px,
  md: 768px,
  lg: 1024px
);

$container-max-widths: (
  sm: 420px,
  md: 720px,
  lg: 960px
);

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, emo %).