Punts d'interrupció

Conceptes bàsics

• Els punts d'interrupció són els elements bàsics del disseny responsive. Utilitzeu-los per controlar quan es pot adaptar el vostre disseny a una finestra gràfica o a una mida del dispositiu en particular.

• Utilitzeu consultes multimèdia per dissenyar el vostre CSS per punt d'interrupció. Les consultes multimèdia són una característica de CSS que us permet aplicar condicionalment estils basats en un conjunt de paràmetres del navegador i del sistema operatiu. Utilitzem més habitualment min-widthen les nostres consultes de mitjans.

• Mòbil primer, el disseny responsiu és l'objectiu. El CSS de Bootstrap té com a objectiu aplicar el mínim d'estils per fer que un disseny funcioni al punt d'interrupció més petit, i després capes d'estils per ajustar aquest disseny per a dispositius més grans. Això optimitza el vostre CSS, millora el temps de renderització i ofereix una gran experiència als vostres visitants.

Punts d'interrupció disponibles

Bootstrap inclou sis punts d'interrupció predeterminats, de vegades coneguts com a nivells de graella , per construir de manera sensible. Aquests punts d'interrupció es poden personalitzar si utilitzeu els nostres fitxers Sass d'origen.

Cada punt d'interrupció s'ha escollit per subjectar còmodament contenidors l'amplada dels quals és múltiple de 12. Els punts d'interrupció també són representatius d'un subconjunt de mides de dispositiu i dimensions de la finestra gràfica habituals; no s'orienten específicament a cada cas d'ús o dispositiu. En canvi, els rangs proporcionen una base sòlida i coherent per construir gairebé qualsevol dispositiu.

Aquests punts d'interrupció es poden personalitzar mitjançant Sass; els trobareu en un mapa de Sass al nostre _variables.scssfull d'estil.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Per obtenir més informació i exemples sobre com modificar els nostres mapes i variables Sass, consulteu la secció Sass de la documentació de Grid .

Consultes de mitjans

Com que Bootstrap està desenvolupat per ser mòbil primer, fem servir un bon grapat de consultes multimèdia per crear punts d'interrupció raonables per als nostres dissenys i interfícies. Aquests punts d'interrupció es basen principalment en amplades mínimes de la finestra gràfica i ens permeten augmentar l'escala dels elements a mesura que canvia la finestra gràfica.

Ample mín

Bootstrap utilitza principalment els intervals de consulta de mitjans següents (o punts d'interrupció) als nostres fitxers Sass d'origen per al nostre disseny, sistema de quadrícula i components.

// Source 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) { ... }
@include media-breakpoint-up(xxl) { ... }

// Usage

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

Aquests mixins Sass es tradueixen al nostre CSS compilat utilitzant els valors declarats a les nostres variables Sass. Per exemple:

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

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

Ample màxim

De tant en tant fem servir consultes multimèdia que van en l'altra direcció (la mida de pantalla donada o més petita ):

// No media query necessary for xs breakpoint as it's effectively `@media (max-width: 0) { ... }`
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
@include media-breakpoint-down(xl) { ... }
@include media-breakpoint-down(xxl) { ... }

// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
  .custom-class {
    display: block;
  }
}

Aquests mixins prenen els punts .02pxd'interrupció declarats, els resten i els utilitzen com a max-widthvalors. Per exemple:

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

// X-Large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

// XX-Large devices (larger desktops)
// No media query since the xxl breakpoint has no upper bound on its width

Punt d'interrupció únic

També hi ha consultes multimèdia i mixins per orientar un únic segment de mides de pantalla utilitzant l'amplada mínima i màxima dels punts d'interrupció.

@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) { ... }
@include media-breakpoint-only(xxl) { ... }

Per exemple, el @include media-breakpoint-only(md) { ... }resultat serà:

@media (min-width: 768px) and (max-width: 991.98px) { ... }

Entre punts de ruptura

De la mateixa manera, les consultes multimèdia poden abastar diverses amplades de punt d'interrupció:

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

El que resulta en:

// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }