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 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 .
Extra pequeño
<576px |
Pequeño
≥576px |
Medio
≥768px |
Grande
≥992px |
Extra grande
≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540 px | 720px | 960 px | 1140 px |
.container-sm |
100% | 540 px | 720px | 960 px | 1140 px |
.container-md |
100% | 100% | 720px | 960 px | 1140 px |
.container-lg |
100% | 100% | 100% | 960 px | 1140 px |
.container-xl |
100% | 100% | 100% | 100% | 1140 px |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
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.
Líquido
Úselo
.container-fluid
para un contenedor de ancho completo, que abarque todo el ancho de la
ventana gráfica.
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
.
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.
Dado que escribimos nuestro CSS fuente en Sass, todas nuestras consultas de medios están disponibles a través de mixins de Sass:
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
min-
y los
max-
prefijos
y las ventanas gráficas con anchos fraccionarios (que pueden ocurrir bajo ciertas condiciones en dispositivos
de alta ppp, 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 los mixins de Sass:
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 mixins de Sass:
Del mismo modo, las consultas de medios pueden abarcar varios anchos de puntos de interrupción:
La combinación de Sass para apuntar al mismo rango de tamaño de pantalla sería:
Í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.
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.