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:

// `xs` returns only a ruleset and no media query
// ... { ... }

// `sm` applies to x-small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }

// `md` applies to small devices (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }

// `lg` applies to medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { ... }

// `xl` applies to large devices (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }

// `xxl` applies to x-large devices (large desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

@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 example the @include media-breakpoint-only(md) { ... } will result in :

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

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

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

Which results in:

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