Breakpoints

Kär Konzepter

• Breakpoints sinn d'Bausteng vum reaktiounsfäeger Design. Benotzt se fir ze kontrolléieren wann Äre Layout op enger bestëmmter Viewport oder Apparatgréisst ugepasst ka ginn.

• Benotzt Medienufroen fir Är CSS duerch Breakpoint ze architektéieren. Media Ufroen sinn eng Feature vu CSS, déi Iech erlaabt Stiler bedingt op Basis vun enger Rei vu Browser- a Betribssystemparameter z'applizéieren. Mir benotze meeschtens min-widthan eise Medienufroen.

• Mobile éischt, reaktiounsfäeger Design ass d'Zil. Bootstrap's CSS zielt fir de bloe Minimum vu Stiler z'applizéieren fir e Layout um klengste Breakpunkt ze maachen, an dann Schichten op Stiler fir dësen Design fir méi grouss Apparater unzepassen. Dëst optiméiert Är CSS, verbessert d'Rendementzäit a bitt eng super Erfahrung fir Är Besucher.

Verfügbar Breakpunkter

Bootstrap enthält sechs Standard Breakpoints, heiansdo als Gittertier bezeechent , fir reaktiounsfäeger ze bauen. Dës Breakpoints kënne personaliséiert ginn wann Dir eis Quell Sass Dateien benotzt.

All Breakpoint gouf gewielt fir bequem Behälter ze halen, deenen hir Breet Multiple vun 12. Breakpoints sinn och representativ fir eng Ënnergrupp vu gemeinsamen Apparatgréissten a Viewport Dimensiounen - si zielen net spezifesch op all Benotzungsfall oder Apparat. Amplaz bidden d'Gamme eng staark a konsequent Fondatioun fir op bal all Apparat ze bauen.

Dës Breakpunkter sinn personaliséierbar iwwer Sass - Dir fannt se an enger Sass Kaart an eisem _variables.scssStylesheet.

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

Fir méi Informatioun a Beispiller wéi Dir eis Sass Kaarten a Variablen ännere kënnt, kuckt w.e.g. op d'Sass Sektioun vun der Grid Dokumentatioun .

Medien Ufroen

Zënter Bootstrap ass entwéckelt fir als éischt mobil ze sinn, benotze mir eng Handvoll Medienufroen fir sënnvoll Breakpunkte fir eis Layouten an Interfaces ze kreéieren. Dës Breakpunkte baséieren meeschtens op Minimum Viewport Breeten an erlaben eis Elementer opzebauen wéi de Viewport ännert.

Min-Breet

Bootstrap benotzt haaptsächlech déi folgend Medien Query Rangen - oder Breakpoints - an eise Quell Sass Dateien fir eise Layout, Gittersystem a Komponenten.

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

Dës Sass Mixins iwwersetzen an eiser kompiléierter CSS mat de Wäerter déi an eise Sass Variablen deklaréiert sinn. Zum Beispill:

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

Mir benotzen heiansdo Medienufroen déi an déi aner Richtung goen (déi gegebene Bildschirmgréisst oder méi kleng ):

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

Dës Mixins huelen déi deklaréiert Breakpoints, subtrahéieren .02pxvun hinnen a benotzen se als eis max-widthWäerter. Zum Beispill:

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

Eenzel Breakpoint

Et ginn och Medienufroen a Mixins fir en eenzege Segment vun Écrangréissten ze zielen mat de Minimum a maximal Breakpoint Breet.

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

Zum Beispill @include media-breakpoint-only(md) { ... }wäert d'Resultat zu:

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

Zwischen Breakpunkten

Ähnlech kënne Medienufroe verschidde Breakpunktbreeten spanen:

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

Wat resultéiert an:

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