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 unmax-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 eswidth: 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 .
Muy pequeño <576 px |
Pequeño ≥576px |
Medio ≥768px |
Grande ≥992px |
Extra grande ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540px | 720px | 960px | 1140px |
.container-sm |
100% | 540px | 720px | 960px | 1140px |
.container-md |
100% | 100% | 720px | 960px | 1140px |
.container-lg |
100% | 100% | 100% | 960px | 1140px |
.container-xl |
100% | 100% | 100% | 100% | 1140px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Todo en uno
Nuestra clase predeterminada .container
es un contenedor receptivo de ancho fijo, lo que significa que max-width
cambia 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 un 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
tiene un 100 % de ancho para comenzar hasta sm
que se alcanza el 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, 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 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
min-
ymax-
las ventanas gráficas con anchos fraccionarios (lo que puede ocurrir bajo ciertas condiciones en dispositivos de alto dpi, por ejemplo) mediante el uso de valores con mayor precisión para estas comparaciones. .
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-index
valores bajos de un solo dígito de 1
, 2
y 3
para estados predeterminados, de desplazamiento y activos. Al pasar el mouse/enfocar/activar, traemos un elemento particular al frente con un z-index
valor más alto para mostrar su borde sobre los elementos hermanos.