Punti di rottura

I cuncetti core

• I punti di rottura sò i blocchi di custruzzione di u disignu responsive. Aduprate per cuntrullà quandu u vostru layout pò esse adattatu à una vista particulare o dimensione di u dispositivu.

• Aduprate media queries per architettu u vostru CSS per breakpoint. I media queries sò una funzione di CSS chì vi permettenu di applicà stili cundiziunali basatu annantu à un set di paràmetri di u navigatore è u sistema operatore. Usemu più cumunimenti min-widthin e nostre dumande di media.

• Mobile prima, u disignu responsive hè u scopu. U CSS di Bootstrap hà u scopu di applicà u minimu minimu di stili per fà un travagliu di layout à u più chjucu puntu di rottura, è poi strati nantu à stili per aghjustà quellu disignu per i dispositi più grande. Questu ottimisimu u vostru CSS, migliurà u tempu di rendering, è furnisce una grande sperienza per i vostri visitatori.

Punti di rottura dispunibili

Bootstrap include sei punti di rottura predeterminati, à volte chjamati grid tiers , per custruisce in modu responsive. Questi punti di rottura ponu esse persunalizati s'è vo aduprate i nostri fugliali Sass fonte.

Ogni puntu di rupture hè statu sceltu per mantene cunfortu cuntenituri chì l'larghezza sò multiplici di 12. I punti di rottura sò ancu rapprisentanti di un subset di dimensioni cumuni di u dispositivu è di dimensioni di vista - ùn anu micca specificamente destinatu à ogni casu d'usu o dispusitivu. Invece, e gamme furnisce una basa forte è coherente per custruisce per quasi ogni dispositivu.

Questi punti di rottura sò persunalizabili via Sass - i truverete in una mappa Sass in a nostra _variables.scssfoglia di stile.

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

Per più infurmazione è esempii nantu à cumu mudificà e nostre carte è variabili Sass, fate riferimentu à a sezione Sass di a documentazione di Grid .

Interrogazioni di media

Siccomu Bootstrap hè sviluppatu per esse mobile prima, usemu una manciata di dumande di media per creà punti di rottura sensibili per i nostri layout è interfacce. Questi punti di rottura sò principalmente basati nantu à l'larghezza minima di a vista è ci permettenu di scalà elementi cum'è a finestra di vista cambia.

Larghezza minima

Bootstrap utilizza principalmente i seguenti intervalli di query media - o breakpoints - in i nostri fugliali Sass fonte per u nostru layout, sistema di griglia è cumpunenti.

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

Questi Sass mixins traduce in u nostru CSS compilatu cù i valori dichjarati in e nostre variabili Sass. Per esempiu:

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

Max-larghezza

Occasionalmente usemu e dumande di media chì vanu in l'altra direzzione (a dimensione di u screnu datu o più chjuca ):

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

Questi mixin piglianu quelli punti di rottura dichjarati, sottrae .02pxda elli, è l'utilizanu cum'è i nostri max-widthvalori. Per esempiu:

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

Puntu di rottura unicu

Ci hè ancu e dumande di media è mixin per targeting un unicu segmentu di dimensioni di schermu utilizendu l'larghezza minima è massima di breakpoint.

@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 esempiu, u @include media-breakpoint-only(md) { ... }risultatu serà:

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

Tra i punti di rottura

In listessu modu, e dumande di media ponu copre parechje larghezze di breakpoint:

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

Chì risultatu in:

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