Punti di rottura
I punti di rottura sò larghezze persunalizabili chì determinanu cumu si comporta u vostru layout responsive in tutte e dimensioni di u dispositivu o di a finestra di vista in Bootstrap.
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-width
in 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.
Breakpoint | Class infix | Dimensioni |
---|---|---|
X-Picculu | Nimu | <576px |
Picculu | sm |
≥ 576 px |
Medium | md |
≥768px |
Grande | lg |
≥ 992 px |
Extra grande | xl |
≥ 1200 px |
Extra extra grande | xxl |
≥1400px |
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.scss
foglia 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 di 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 .02px
da elli, è l'utilizanu cum'è i nostri max-width
valori. Per esempiu:
// `xs` returns only a ruleset and no media query
// ... { ... }
// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
min-
è i max-
prefissi è i viewports cù larghezze fraccionari (chì ponu accade in certe cundizioni in i dispositi dpi high-dpi, per esempiu) utilizendu valori cù una precisione più alta.
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) { ... }