Puncte de întrerupere

Concepte de baza

• Punctele de întrerupere sunt elementele de bază ale designului responsive. Utilizați-le pentru a controla când aspectul dvs. poate fi adaptat la o anumită dimensiune de vizualizare sau dispozitiv.

• Utilizați interogări media pentru a vă arhitectura CSS-ul după punctul de întrerupere. Interogările media sunt o caracteristică a CSS care vă permite să aplicați în mod condiționat stiluri bazate pe un set de parametri de browser și de sistem de operare. Utilizăm cel mai frecvent min-widthîn interogările noastre media.

• În primul rând pe mobil, designul receptiv este scopul. CSS-ul Bootstrap urmărește să aplice minimumul de stiluri pentru a face ca un aspect să funcționeze la cel mai mic punct de întrerupere, iar apoi straturi pe stiluri pentru a ajusta designul pentru dispozitive mai mari. Acest lucru vă optimizează CSS-ul, îmbunătățește timpul de redare și oferă o experiență excelentă pentru vizitatori.

Puncte de întrerupere disponibile

Bootstrap include șase puncte de întrerupere implicite, uneori denumite niveluri de grilă , pentru construirea în mod receptiv. Aceste puncte de întrerupere pot fi personalizate dacă utilizați fișierele noastre sursă Sass.

Fiecare punct de întrerupere a fost ales pentru a ține confortabil containere ale căror lățimi sunt multiple de 12. Punctele de întrerupere sunt, de asemenea, reprezentative pentru un subset de dimensiuni comune ale dispozitivelor și dimensiunile ferestrei de vizualizare - nu vizează în mod specific fiecare caz de utilizare sau dispozitiv. În schimb, gamele oferă o bază solidă și consecventă pe care să se bazeze pentru aproape orice dispozitiv.

Aceste puncte de întrerupere sunt personalizabile prin Sass — le veți găsi într-o hartă Sass din foaia noastră de _variables.scssstil.

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

Pentru mai multe informații și exemple despre cum să modificați hărțile și variabilele noastre Sass, vă rugăm să consultați secțiunea Sass din documentația Grid .

Interogări media

Deoarece Bootstrap este dezvoltat pentru a fi mai întâi mobil, folosim o mână de interogări media pentru a crea puncte de întrerupere sensibile pentru layout-urile și interfețele noastre. Aceste puncte de întrerupere se bazează în mare parte pe lățimi minime ale ferestrelor de vizualizare și ne permit să mărim elementele pe măsură ce fereastra de vizualizare se schimbă.

Lățimea minimă

Bootstrap utilizează în principal următoarele intervale de interogare media — sau puncte de întrerupere — în fișierele noastre sursă Sass pentru aspectul, sistemul de grilă și componentele noastre.

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

Aceste mixine Sass se traduc în CSS-ul nostru compilat folosind valorile declarate în variabilele noastre Sass. De exemplu:

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

Lățimea maximă

Folosim ocazional interogări media care merg în cealaltă direcție (dimensiunea ecranului dată sau mai mică ):

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

Aceste mixuri iau acele puncte de întrerupere declarate, scad .02pxdin ele și le folosesc ca max-widthvalori. De exemplu:

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

Punct de întrerupere unic

Există, de asemenea, interogări media și mix-uri pentru vizarea unui singur segment de dimensiuni de ecran folosind lățimile minime și maxime ale punctelor de întrerupere.

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

De exemplu, @include media-breakpoint-only(md) { ... }va avea ca rezultat:

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

Între puncte de întrerupere

În mod similar, interogările media se pot întinde pe mai multe lățimi ale punctelor de întrerupere:

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

Ceea ce are ca rezultat:

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