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 . Escolle entre un recipiente sensible e de ancho fixo (é dicir, os seus max-widthcambios en cada punto de interrupción) ou de ancho fluído (o que significa que é 100%ancho todo o tempo).

Aínda que os contedores poden ser aniñados, a maioría dos deseños non precisan dun contenedor aniñado.

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

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

<div class="container-fluid">
  ...
</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.