Knækpunkter

Kernebegreber

• Knækpunkter er byggestenene i responsivt design. Brug dem til at styre, hvornår dit layout kan tilpasses til en bestemt visningsport eller enhedsstørrelse.

• Brug medieforespørgsler til at bygge din CSS efter breakpoint. Medieforespørgsler er en funktion i CSS, der giver dig mulighed for betinget at anvende stilarter baseret på et sæt browser- og operativsystemparametre. Vi bruger oftest min-widthi vores medieforespørgsler.

• Mobile først, responsivt design er målet. Bootstraps CSS sigter mod at anvende det absolutte minimum af stilarter for at få et layout til at fungere ved det mindste breakpoint, og derefter lægge lag på stile for at justere dette design til større enheder. Dette optimerer din CSS, forbedrer gengivelsestiden og giver en god oplevelse for dine besøgende.

Tilgængelige brudpunkter

Bootstrap inkluderer seks standard breakpoints, nogle gange omtalt som grid tiers , til at bygge responsivt. Disse brudpunkter kan tilpasses, hvis du bruger vores Sass-kildefiler.

Hvert brudpunkt blev valgt til komfortabelt at holde beholdere, hvis bredder er multipla af 12. Knækpunkter er også repræsentative for en undergruppe af almindelige enhedsstørrelser og visningsportdimensioner – de er ikke specifikt målrettet mod enhver brugssituation eller enhed. I stedet giver serierne et stærkt og ensartet fundament at bygge på for næsten enhver enhed.

Disse breakpoints kan tilpasses via Sass – du finder dem på et Sass-kort i vores _variables.scssstylesheet.

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

For mere information og eksempler på, hvordan man ændrer vores Sass-kort og variabler, henvises til Sass-sektionen i Grid-dokumentationen .

Medieforespørgsler

Da Bootstrap er udviklet til at være mobil først, bruger vi en håndfuld medieforespørgsler til at skabe fornuftige brudpunkter for vores layout og grænseflader. Disse brudpunkter er for det meste baseret på minimum viewport-bredder og giver os mulighed for at skalere elementer op, efterhånden som viewporten ændres.

Min bredde

Bootstrap bruger primært følgende medieforespørgselsområder – eller brudpunkter – i vores Sass-kildefiler til vores layout, gittersystem og komponenter.

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

Disse Sass-mixins oversættes i vores kompilerede CSS ved hjælp af de værdier, der er angivet i vores Sass-variabler. For eksempel:

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

Vi bruger lejlighedsvis medieforespørgsler, der går i den anden retning (den givne skærmstørrelse eller mindre ):

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

Disse mixins tager de erklærede brudpunkter, trækker .02pxfra dem og bruger dem som vores max-widthværdier. For eksempel:

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

Enkelt brudpunkt

Der er også medieforespørgsler og mixins til at målrette mod et enkelt segment af skærmstørrelser ved brug af minimums- og maksimumsbrudpunktsbredderne.

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

For eksempel @include media-breakpoint-only(md) { ... }vil det resultere i:

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

Mellem brudpunkter

På samme måde kan medieforespørgsler strække sig over flere brudpunktsbredder:

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

Hvilket resulterer i:

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