Punti di interruzione

Concetti principali

• I punti di interruzione sono gli elementi costitutivi del design reattivo. Usali per controllare quando il tuo layout può essere adattato a una particolare finestra o dimensione del dispositivo.

• Usa le media query per architettare il tuo CSS in base al punto di interruzione. Le media query sono una funzionalità dei CSS che consentono di applicare condizionalmente gli stili in base a una serie di parametri del browser e del sistema operativo. Usiamo più comunemente min-widthnelle nostre media query.

• Mobile first, responsive design è l'obiettivo. Il CSS di Bootstrap mira ad applicare il minimo indispensabile di stili per far funzionare un layout al punto di interruzione più piccolo, quindi strati su stili per adattare quel design per dispositivi più grandi. Questo ottimizza il tuo CSS, migliora i tempi di rendering e offre un'esperienza eccezionale ai tuoi visitatori.

Punti di interruzione disponibili

Bootstrap include sei punti di interruzione predefiniti, a volte indicati come livelli di griglia , per la creazione in modo reattivo. Questi punti di interruzione possono essere personalizzati se stai utilizzando i nostri file Sass di origine.

Ogni punto di interruzione è stato scelto per contenere comodamente contenitori le cui larghezze sono multipli di 12. I punti di interruzione sono anche rappresentativi di un sottoinsieme di dimensioni comuni dei dispositivi e dimensioni del viewport: non si rivolgono in modo specifico a ogni caso d'uso o dispositivo. Invece, le gamme forniscono una base solida e coerente su cui costruire per quasi tutti i dispositivi.

Questi punti di interruzione sono personalizzabili tramite Sass: li troverai in una mappa Sass nel nostro _variables.scssfoglio di stile.

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

Per ulteriori informazioni ed esempi su come modificare le nostre mappe e variabili Sass, fare riferimento alla sezione Sass della documentazione Grid .

Query sui media

Poiché Bootstrap è stato sviluppato per essere mobile first, utilizziamo una manciata di media query per creare punti di interruzione sensati per i nostri layout e interfacce. Questi punti di interruzione si basano principalmente su larghezze minime della vista e ci consentono di aumentare la scala degli elementi man mano che la vista cambia.

Larghezza minima

Bootstrap utilizza principalmente i seguenti intervalli di query multimediali, o punti di interruzione, nei nostri file Sass di origine per il layout, il sistema di griglia e i componenti.

// 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 mixin Sass si traducono nel nostro CSS compilato usando i valori dichiarati nelle nostre variabili Sass. Per esempio:

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

Larghezza massima

Occasionalmente utilizziamo query multimediali che vanno nella direzione opposta (la dimensione dello schermo indicata o inferiore ):

// 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 prendono quei breakpoint dichiarati, li sottraggono .02pxe li usano come nostri max-widthvalori. Per esempio:

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

Singolo punto di interruzione

Esistono anche media query e mixin per il targeting di un singolo segmento di dimensioni dello schermo utilizzando le larghezze minime e massime dei punti di interruzione.

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

Ad esempio il @include media-breakpoint-only(md) { ... }risulterà in:

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

Tra punti di interruzione

Allo stesso modo, le media query possono estendersi su più larghezze di punti di interruzione:

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

Che si traduce in:

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