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 un max-widthen 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-widthcompara cada contedor co orixinal .containere .container-fluiden cada punto de interrupción.

Véaos en acción e compáraos no noso exemplo de Grid .

Todo en un

A nosa clase predeterminada .containeré un contedor sensible e de ancho fixo, é dicir, os seus max-widthcambios en cada punto de interrupción.

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

Fluída

Utilízase .container-fluidpara un contedor de ancho completo, que abarque todo o ancho da ventana gráfica.

<div class="container-fluid">
  ...
</div>

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-widths para cada un dos puntos de interrupción máis altos. Por exemplo, .container-smten un ancho 100 % para comezar ata smque se alcance o punto de interrupción, onde se escalará con md, lg, e 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 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.

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

Xa que escribimos o noso CSS fonte en Sass, todas as nosas consultas multimedia están dispoñibles a través de Sass mixins:

// 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 multimedia que van na outra dirección (o tamaño da pantalla ou máis pequeno ):

// 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

Unha vez máis, estas consultas multimedia tamén están dispoñibles 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;
  }
}

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.

// 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 multimedia tamén están dispoñibles 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) { ... }

Do mesmo xeito, as consultas multimedia poden abarcar varios 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) { ... }

O mixin de Sass para orientar o mesmo intervalo de tamaño de pantalla sería:

@include media-breakpoint-between(md, xl) { ... }

Í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.

$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 xestionar bordos superpostos dentro dos compoñentes (por exemplo, botóns e entradas en grupos de entrada), usamos z-indexvalores baixos dun só díxito de 1, 2, e 3para os estados predeterminados, de paso e activos. En pasar o rato/enfoque/activo, levamos un elemento particular á primeira liña cun z-indexvalor máis alto para mostrar o seu bordo sobre os elementos irmáns.