Breekpunte

Kernbegrippe

• Breekpunte is die boustene van responsiewe ontwerp. Gebruik hulle om te beheer wanneer jou uitleg aangepas kan word by 'n spesifieke uitsigpoort of toestelgrootte.

• Gebruik medianavrae om jou CSS volgens breekpunt te bou. Medianavrae is 'n kenmerk van CSS wat jou toelaat om style voorwaardelik toe te pas op grond van 'n stel blaaier- en bedryfstelselparameters. Ons gebruik die meeste min-widthin ons media-navrae.

• Mobile eerste, responsiewe ontwerp is die doel. Bootstrap se CSS poog om die minimum van style toe te pas om 'n uitleg by die kleinste breekpunt te laat werk, en dan lae op style om daardie ontwerp vir groter toestelle aan te pas. Dit optimaliseer jou CSS, verbeter leweringstyd en bied 'n wonderlike ervaring vir jou besoekers.

Beskikbare breekpunte

Bootstrap bevat ses verstekbreekpunte, wat soms na verwys word as roostervlakke , om responsief te bou. Hierdie breekpunte kan aangepas word as jy ons bron Sass-lêers gebruik.

Elke breekpunt is gekies om houers gemaklik te hou waarvan die breedtes veelvoude van 12 is. Breekpunte is ook verteenwoordigend van 'n subset van algemene toestelgroottes en uitsigvenster-afmetings—hulle teiken nie spesifiek elke gebruiksgeval of toestel nie. In plaas daarvan bied die reekse 'n sterk en konsekwente grondslag om op byna enige toestel voort te bou.

Hierdie breekpunte is aanpasbaar via Sass—jy sal hulle in 'n Sass-kaart in ons _variables.scssstylblad vind.

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

Vir meer inligting en voorbeelde oor hoe om ons Sass-kaarte en veranderlikes te wysig, verwys asseblief na die Sass-afdeling van die Grid-dokumentasie .

Media navrae

Aangesien Bootstrap ontwikkel is om eerstens mobiel te wees, gebruik ons ​​'n handvol medianavrae om sinvolle breekpunte vir ons uitlegte en koppelvlakke te skep. Hierdie breekpunte is meestal gebaseer op minimum viewport-wydtes en stel ons in staat om elemente op te skaal soos die viewport verander.

Min-breedte

Bootstrap gebruik hoofsaaklik die volgende medianavraagreekse—of breekpunte—in ons bron Sass-lêers vir ons uitleg, roosterstelsel en komponente.

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

Hierdie Sass-mengings vertaal in ons saamgestelde CSS met behulp van die waardes wat in ons Sass-veranderlikes verklaar is. Byvoorbeeld:

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

Maksimum breedte

Ons gebruik soms medianavrae wat in die ander rigting gaan (die gegewe skermgrootte 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;
  }
}

Hierdie mengsels neem daardie verklaarde breekpunte, trek .02pxdaarvan af en gebruik dit as ons max-widthwaardes. Byvoorbeeld:

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

Enkele breekpunt

Daar is ook medianavrae en -mengings om 'n enkele segment van skermgroottes te rig deur die minimum en maksimum breekpuntwydtes te gebruik.

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

Die @include media-breakpoint-only(md) { ... }sal byvoorbeeld lei tot:

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

Tussen breekpunte

Net so kan medianavrae oor verskeie breekpuntwydtes strek:

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

Wat lei tot:

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