Visión general

Componentes y opciones para diseñar su proyecto Bootstrap, incluidos contenedores envolventes, un sistema de cuadrícula potente, un objeto de medios flexible y clases de utilidad receptivas.

Contenedores

Los contenedores son el elemento de diseño más básico en Bootstrap y son necesarios cuando se utiliza nuestro sistema de cuadrícula predeterminado . Los contenedores se utilizan para contener, rellenar y (a veces) centrar el contenido dentro de ellos. Si bien los contenedores se pueden anidar, la mayoría de los diseños no requieren un contenedor anidado.

Bootstrap viene con tres contenedores diferentes:

• .container, que establece un max-widthen cada punto de interrupción de respuesta
• .container-fluid, que está width: 100%en todos los puntos de interrupción
• .container-{breakpoint}, que es width: 100%hasta el punto de interrupción especificado

La siguiente tabla ilustra cómo se max-widthcompara cada contenedor con el original .containery .container-fluiden cada punto de interrupción.

Véalos en acción y compárelos en nuestro ejemplo de Grid .

Todo en uno

Nuestra clase predeterminada .containeres un contenedor receptivo de ancho fijo, lo que significa que max-widthcambia en cada punto de interrupción.

<div class="container">
  <!-- Content here -->
</div>

Líquido

Úselo .container-fluidpara un contenedor de ancho completo, que abarque todo el ancho de la ventana gráfica.

<div class="container-fluid">
  ...
</div>

Sensible

Los contenedores receptivos son nuevos en Bootstrap v4.4. Le permiten especificar una clase que tiene un 100 % de ancho hasta que se alcanza el punto de interrupción especificado, después de lo cual aplicamos max-widths para cada uno de los puntos de interrupción más altos. Por ejemplo, .container-smtiene un 100 % de ancho para comenzar hasta smque se alcanza el punto de interrupción, donde se ampliará con md, lgy xl.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>

Puntos de interrupción receptivos

Dado que Bootstrap está desarrollado para ser móvil primero, usamos un puñado de consultas de medios para crear puntos de interrupción sensibles para nuestros diseños e interfaces. Estos puntos de interrupción se basan principalmente en anchos mínimos de ventana gráfica y nos permiten aumentar la escala de los elementos a medida que cambia la ventana gráfica.

Bootstrap utiliza principalmente los siguientes rangos de consulta de medios, o puntos de interrupción, en nuestros archivos Sass de origen para nuestro diseño, sistema de cuadrícula y componentes.

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Dado que escribimos nuestro CSS de origen en Sass, todas nuestras consultas de medios están disponibles a través de Sass mixins:

// No media query necessary for xs breakpoint as it's effectively `@media (min-width: 0) { ... }`
@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

// Example: Hide starting at `min-width: 0`, and then show at the `sm` breakpoint
.custom-class {
  display: none;
}
@include media-breakpoint-up(sm) {
  .custom-class {
    display: block;
  }
}

Ocasionalmente usamos consultas de medios que van en la otra dirección (el tamaño de pantalla dado o más pequeño ):

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// Large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width

Una vez más, estas consultas de medios también están disponibles a través de Sass mixins:

@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

También hay consultas de medios y mixins para apuntar a un solo segmento de tamaños de pantalla utilizando los anchos de punto de interrupción mínimo y máximo.

// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

Estas consultas de medios también están disponibles a través de Sass mixins:

@include media-breakpoint-only(xs) { ... }
@include media-breakpoint-only(sm) { ... }
@include media-breakpoint-only(md) { ... }
@include media-breakpoint-only(lg) { ... }
@include media-breakpoint-only(xl) { ... }

De manera similar, las consultas de medios pueden abarcar múltiples anchos de punto de interrupción:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }

La combinación de Sass para apuntar al mismo rango de tamaño de pantalla sería:

@include media-breakpoint-between(md, xl) { ... }

índice Z

Varios componentes de Bootstrap utilizan z-index, la propiedad CSS que ayuda a controlar el diseño al proporcionar un tercer eje para organizar el contenido. Utilizamos una escala de índice z predeterminada en Bootstrap que ha sido diseñada para capas de navegación, información sobre herramientas y ventanas emergentes, modales y más.

Estos valores más altos comienzan en un número arbitrario, lo suficientemente alto y específico para evitar idealmente conflictos. Necesitamos un conjunto estándar de estos en todos nuestros componentes en capas (información sobre herramientas, ventanas emergentes, barras de navegación, menús desplegables, modales) para que podamos ser razonablemente consistentes en los comportamientos. No hay motivo por el que no hayamos podido usar 100+ o 500+.

No fomentamos la personalización de estos valores individuales; si cambia uno, es probable que necesite cambiarlos todos.

$zindex-dropdown:          1000 !default;
$zindex-sticky:            1020 !default;
$zindex-fixed:             1030 !default;
$zindex-modal-backdrop:    1040 !default;
$zindex-modal:             1050 !default;
$zindex-popover:           1060 !default;
$zindex-tooltip:           1070 !default;

Para manejar los bordes superpuestos dentro de los componentes (p. ej., botones e entradas en grupos de entrada), usamos z-indexvalores bajos de un solo dígito de 1, 2y 3para estados predeterminados, de desplazamiento y activos. Al pasar el mouse/enfocar/activar, traemos un elemento particular al frente con un z-indexvalor más alto para mostrar su borde sobre los elementos hermanos.