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.
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 . Elija entre un contenedor receptivo de ancho fijo (lo que significa que max-width
cambia en cada punto de interrupción) o de ancho fluido (lo que significa que es 100%
ancho todo el tiempo).
Si bien los contenedores se pueden anidar, la mayoría de los diseños no requieren un contenedor anidado.
Úselo .container-fluid
para un contenedor de ancho completo, que abarque todo el ancho de la ventana gráfica.
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.
Dado que escribimos nuestro CSS de origen en Sass, todas nuestras consultas de medios están disponibles a través de Sass mixins:
Ocasionalmente usamos consultas de medios que van en la otra dirección (el tamaño de pantalla dado o más pequeño ):
Tenga en cuenta que, dado que los navegadores actualmente no admiten consultas de contexto de rango , solucionamos las limitaciones de prefijos min-
ymax-
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:
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.
Estas consultas de medios también están disponibles a través de Sass mixins:
De manera similar, las consultas de medios pueden abarcar múltiples anchos de punto de interrupción:
La combinación de Sass para apuntar al mismo rango de tamaño de pantalla sería:
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.
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.