Breekpunten

Hoofdconcepten

• Breakpoints zijn de bouwstenen van responsive design. Gebruik ze om te bepalen wanneer uw lay-out kan worden aangepast aan een bepaalde viewport of apparaatgrootte.

• Gebruik mediaquery's om uw CSS op breekpunt te ontwerpen. Mediaquery's zijn een functie van CSS waarmee u stijlen voorwaardelijk kunt toepassen op basis van een set browser- en besturingssysteemparameters. We gebruiken het meest min-widthin onze mediaquery's.

• Mobile first, responsive design is het doel. De CSS van Bootstrap is bedoeld om het absolute minimum aan stijlen toe te passen om een ​​lay-out op het kleinste breekpunt te laten werken, en vervolgens lagen op stijlen om dat ontwerp aan te passen voor grotere apparaten. Dit optimaliseert uw CSS, verbetert de weergavetijd en biedt een geweldige ervaring voor uw bezoekers.

Beschikbare breekpunten

Bootstrap bevat zes standaardonderbrekingspunten, ook wel rasterlagen genoemd , om responsief te bouwen. Deze onderbrekingspunten kunnen worden aangepast als u onze Sass-bronbestanden gebruikt.

Elk breekpunt is gekozen om comfortabel containers te kunnen bevatten met een breedte van veelvouden van 12. Breekpunten zijn ook representatief voor een subset van veelvoorkomende apparaatformaten en viewport-dimensies - ze zijn niet specifiek gericht op elke use case of elk apparaat. In plaats daarvan bieden de reeksen een sterke en consistente basis om op voort te bouwen voor bijna elk apparaat.

Deze breekpunten zijn aanpasbaar via Sass - je vindt ze in een Sass-kaart in onze _variables.scssstylesheet.

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

Raadpleeg de Sass-sectie van de Grid-documentatie voor meer informatie en voorbeelden over het wijzigen van onze Sass-kaarten en -variabelen .

Mediaquery's

Omdat Bootstrap is ontwikkeld om eerst mobiel te zijn, gebruiken we een handvol mediaquery's om verstandige breekpunten te creëren voor onze lay-outs en interfaces. Deze breekpunten zijn meestal gebaseerd op minimale viewport-breedtes en stellen ons in staat om elementen op te schalen als de viewport verandert.

Min-breedte

Bootstrap gebruikt voornamelijk de volgende mediaquerybereiken (of breekpunten) in onze Sass-bronbestanden voor onze lay-out, rastersysteem en componenten.

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

Deze Sass-mixins vertalen zich in onze gecompileerde CSS met behulp van de waarden die zijn gedeclareerd in onze Sass-variabelen. Bijvoorbeeld:

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

We gebruiken af ​​en toe mediaquery's die in de andere richting gaan (de gegeven schermgrootte of 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;
  }
}

Deze mixins nemen die aangegeven breekpunten, trekken .02pxze af en gebruiken ze als onze max-widthwaarden. Bijvoorbeeld:

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

Enkel breekpunt

Er zijn ook mediaquery's en mixins voor het targeten van een enkel segment van schermformaten met behulp van de minimale en maximale breekpuntbreedten.

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

Het resultaat zal bijvoorbeeld @include media-breakpoint-only(md) { ... }zijn:

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

Tussen breekpunten

Evenzo kunnen mediaquery's meerdere breekpuntbreedten omvatten:

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

Wat resulteert in:

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