Visión xeral
Compoñentes e opcións para organizar o seu proxecto Bootstrap, incluíndo contedores de envoltura, un poderoso sistema de reixa, un obxecto multimedia flexible e clases de utilidade sensibles.
Contenedores
Os contedores son o elemento de deseño máis básico en Bootstrap e son necesarios cando se usa o noso sistema de grade predeterminado . Os contedores úsanse para conter, almofada e (ás veces) centrar o contido neles. Aínda que os contedores poden ser aniñados, a maioría dos deseños non precisan dun contenedor aniñado.
Bootstrap vén con tres recipientes diferentes:
.container
, que establece unmax-width
en cada punto de interrupción de resposta.container-fluid
, que estáwidth: 100%
en todos os puntos de interrupción.container-{breakpoint}
, que éwidth: 100%
ata o punto de interrupción especificado
A seguinte táboa ilustra como se max-width
compara cada contedor co orixinal .container
e .container-fluid
en cada punto de interrupción.
Véaos en acción e compáraos no noso exemplo de Grid .
Extra pequeno <576px |
Pequeno ≥576 píxeles |
Media ≥768 píxeles |
Grande ≥992px |
Extra grande ≥1200px |
|
---|---|---|---|---|---|
.container |
100 % | 540 píxeles | 720 píxeles | 960 píxeles | 1140 píxeles |
.container-sm |
100 % | 540 píxeles | 720 píxeles | 960 píxeles | 1140 píxeles |
.container-md |
100 % | 100 % | 720 píxeles | 960 píxeles | 1140 píxeles |
.container-lg |
100 % | 100 % | 100 % | 960 píxeles | 1140 píxeles |
.container-xl |
100 % | 100 % | 100 % | 100 % | 1140 píxeles |
.container-fluid |
100 % | 100 % | 100 % | 100 % | 100 % |
Todo en un
A nosa clase predeterminada .container
é un contedor sensible e de ancho fixo, é dicir, os seus max-width
cambios en cada punto de interrupción.
Fluída
Utilízase .container-fluid
para un contedor de ancho completo, que abarque todo o ancho da ventana gráfica.
Sensible
Os contedores sensibles son novos en Bootstrap v4.4. Permítenche especificar unha clase que teña un ancho 100 % ata que se alcance o punto de interrupción especificado, despois do cal aplicamos max-width
s para cada un dos puntos de interrupción máis altos. Por exemplo, .container-sm
ten un ancho 100 % para comezar ata sm
que se alcance o punto de interrupción, onde se escalará con md
, lg
, e xl
.
Puntos de interrupción sensibles
Dado que Bootstrap está desenvolvido para ser móbil primeiro, usamos un puñado de consultas multimedia para crear puntos de interrupción sensatos para os nosos deseños e interfaces. Estes puntos de interrupción baséanse na súa maioría en anchos mínimos de vistas e permítennos ampliar os elementos a medida que cambia a vista.
Bootstrap usa principalmente os seguintes intervalos de consulta multimedia (ou puntos de interrupción) nos nosos ficheiros de orixe Sass para o noso deseño, sistema de cuadrícula e compoñentes.
Xa que escribimos o noso CSS fonte en Sass, todas as nosas consultas multimedia están dispoñibles a través de Sass mixins:
Ocasionalmente usamos consultas multimedia que van na outra dirección (o tamaño da pantalla ou máis pequeno ):
Teña en conta que, dado que actualmente os navegadores non admiten consultas de contexto de intervalos , traballamos sobre as limitacións min-
e os max-
prefixos e as ventás gráficas con anchos fraccionarios (que poden ocorrer en determinadas condicións en dispositivos de alta ppp, por exemplo) mediante o uso de valores con maior precisión para estas comparacións. .
Unha vez máis, estas consultas multimedia tamén están dispoñibles a través de Sass mixins:
Tamén hai consultas multimedia e mixins para orientar un único segmento de tamaños de pantalla utilizando os anchos de punto de interrupción mínimo e máximo.
Estas consultas multimedia tamén están dispoñibles a través de Sass mixins:
Do mesmo xeito, as consultas multimedia poden abarcar varios puntos de interrupción:
O mixin de Sass para orientar o mesmo intervalo de tamaño de pantalla sería:
Índice Z
Varios compoñentes de Bootstrap utilizan z-index
, a propiedade CSS que axuda a controlar o deseño proporcionando un terceiro eixe para organizar o contido. Utilizamos unha escala de índice z predeterminada en Bootstrap que foi deseñada para crear capas de navegación, información sobre ferramentas e popovers, modais e moito máis.
Estes valores máis altos comezan nun número arbitrario, alto e o suficientemente específico como para evitar conflitos. Necesitamos un conxunto estándar destes nos nosos compoñentes en capas (suxestións de ferramentas, popovers, barras de navegación, menús despregables, modais) para que poidamos ser razoablemente consistentes nos comportamentos. Non hai razón pola que non puidésemos usar 100
+ ou 500
+.
Non fomentamos a personalización destes valores individuais; se cambias un, é probable que teñas que cambialos todos.
Para xestionar bordos superpostos dentro dos compoñentes (por exemplo, botóns e entradas en grupos de entrada), usamos z-index
valores baixos dun só díxito de 1
, 2
, e 3
para os estados predeterminados, de paso e activos. En pasar o rato/enfoque/activo, levamos un elemento particular á primeira liña cun z-index
valor máis alto para mostrar o seu bordo sobre os elementos irmáns.