Visión general

Componentes y opciones para diseñar su proyecto Bootstrap, incluidos contenedores envolventes, un potente sistema de cuadrícula, un objeto multimedia 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 usa 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-width en 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-width compara cada contenedor con el original .container y .container-fluid en cada punto de interrupción.

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

Todo en uno

Nuestra .container clase predeterminada es un contenedor receptivo de ancho fijo, es decir, sus max-width cambios en cada punto de interrupción.

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

Líquido

Úselo .container-fluid para 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 100% de ancho hasta que se alcanza el punto de interrupción especificado, después de lo cual aplicamos max-width s para cada uno de los puntos de interrupción más altos. Por ejemplo, .container-sm es 100% de ancho para iniciar hasta que el sm se alcanza punto de interrupción, donde se ampliará con md , lg y 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, utilizamos 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 los anchos mínimos de la ventana y nos permiten escalar los elementos a medida que cambia la ventana.

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 fuente en Sass, todas nuestras consultas de medios están disponibles a través de mixins de Sass:

// 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 los mixins de Sass:

@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 mixins de Sass:

@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) { ... }

Del mismo modo, las consultas de medios pueden abarcar varios anchos de puntos 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 como para evitar, idealmente, conflictos. Necesitamos un conjunto estándar de estos en 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 ninguna razón por la que no pudimos haber usado 100 + o 500 +.

No fomentamos la personalización de estos valores individuales; si cambia uno, es probable que deba 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 las fronteras dentro de los componentes (por ejemplo, botones y entradas en grupos de entrada) que se superpone, utilizamos bajas de un solo dígito z-index valores de 1 , 2 y 3 por defecto, suspender, y estados activos. En hover / focus / active, traemos un elemento particular al frente con un z-index valor más alto para mostrar su borde sobre los elementos hermanos.