Haltepunkte

Kernkonzepte

• Breakpoints sind die Bausteine ​​des responsiven Designs. Verwenden Sie sie, um zu steuern, wann Ihr Layout an einen bestimmten Darstellungsbereich oder eine bestimmte Gerätegröße angepasst werden kann.

• Verwenden Sie Medienabfragen, um Ihr CSS nach Haltepunkten zu gestalten. Medienabfragen sind eine Funktion von CSS, mit der Sie Stile basierend auf einer Reihe von Browser- und Betriebssystemparametern bedingt anwenden können. Wir verwenden am häufigsten min-widthin unseren Medienabfragen.

• Mobile first, responsives Design ist das Ziel. Das CSS von Bootstrap zielt darauf ab, das Nötigste an Stilen anzuwenden, damit ein Layout am kleinsten Haltepunkt funktioniert, und dann Stile zu überlagern, um dieses Design für größere Geräte anzupassen. Dies optimiert Ihr CSS, verbessert die Renderzeit und bietet Ihren Besuchern ein großartiges Erlebnis.

Verfügbare Haltepunkte

Bootstrap enthält sechs Standard-Breakpoints, die manchmal als Grid-Tiers bezeichnet werden, um reaktionsschnell zu bauen. Diese Haltepunkte können angepasst werden, wenn Sie unsere Sass-Quelldateien verwenden.

Jeder Haltepunkt wurde so gewählt, dass er bequem Container aufnehmen kann, deren Breite ein Vielfaches von 12 ist. Haltepunkte sind auch repräsentativ für eine Teilmenge gängiger Gerätegrößen und Ansichtsfensterabmessungen – sie zielen nicht speziell auf jeden Anwendungsfall oder jedes Gerät ab. Stattdessen bieten die Sortimente eine starke und konsistente Grundlage, auf der nahezu jedes Gerät aufbauen kann.

Diese Haltepunkte sind über Sass anpassbar – Sie finden sie in einer Sass-Karte in unserem _variables.scssStylesheet.

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

Weitere Informationen und Beispiele zum Ändern unserer Sass-Maps und -Variablen finden Sie im Sass-Abschnitt der Grid-Dokumentation .

Medien-Anfragen

Da Bootstrap entwickelt wurde, um zuerst mobil zu sein, verwenden wir eine Handvoll Medienabfragen , um sinnvolle Haltepunkte für unsere Layouts und Schnittstellen zu erstellen. Diese Haltepunkte basieren hauptsächlich auf minimalen Ansichtsfensterbreiten und ermöglichen es uns, Elemente zu vergrößern, wenn sich das Ansichtsfenster ändert.

Min-Breite

Bootstrap verwendet hauptsächlich die folgenden Medienabfragebereiche – oder Haltepunkte – in unseren Sass-Quelldateien für unser Layout, unser Rastersystem und unsere 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;
  }
}

Diese Sass-Mixins werden in unserem kompilierten CSS mit den in unseren Sass-Variablen deklarierten Werten übersetzt. Zum Beispiel:

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

Maximale Breite

Wir verwenden gelegentlich Medienabfragen, die in die andere Richtung gehen (die angegebene Bildschirmgröße oder kleiner ):

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

Diese Mixins nehmen diese deklarierten Haltepunkte, subtrahieren .02pxsie und verwenden sie als unsere max-widthWerte. Zum Beispiel:

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

Einzelner Haltepunkt

Es gibt auch Medienabfragen und Mixins zum Targeting eines einzelnen Segments von Bildschirmgrößen unter Verwendung der minimalen und maximalen Haltepunktbreite.

@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 Beispiel @include media-breakpoint-only(md) { ... }führt das zu:

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

Zwischen Haltepunkten

Ebenso können Medienabfragen mehrere Haltepunktbreiten umfassen:

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

Was in ... endet:

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