Mejne točke

Temeljni pojmi

• Prelomne točke so gradniki odzivnega oblikovanja. Uporabite jih za nadzor, kdaj je vašo postavitev mogoče prilagoditi za določeno vidno polje ali velikost naprave.

• Uporabite medijske poizvedbe, da oblikujete svoj CSS po prelomni točki. Medijske poizvedbe so funkcija CSS, ki vam omogoča pogojno uporabo slogov na podlagi niza parametrov brskalnika in operacijskega sistema. Najpogosteje uporabljamo min-widthv naših medijskih poizvedbah.

• Cilj je najprej mobilno, odzivno oblikovanje. Cilj Bootstrapovega CSS je uporabiti minimalno število slogov, da bo postavitev delovala na najmanjši prelomni točki, nato pa nanese sloje na sloge, da prilagodi ta dizajn za večje naprave. To optimizira vaš CSS, izboljša čas upodabljanja in zagotavlja odlično izkušnjo za vaše obiskovalce.

Razpoložljive prelomne točke

Bootstrap vključuje šest privzetih prelomnih točk, ki jih včasih imenujemo mrežne ravni , za odzivno gradnjo. Te prekinitvene točke je mogoče prilagoditi, če uporabljate naše izvorne datoteke Sass.

Vsaka prelomna točka je bila izbrana za udobno držanje vsebnikov, katerih širine so večkratniki 12. Prelomne točke so tudi reprezentativne za podmnožico običajnih velikosti naprav in dimenzij vidnega polja – ne ciljajo posebej na vsak primer uporabe ali napravo. Namesto tega obsegi zagotavljajo močno in dosledno podlago za nadgradnjo za skoraj vsako napravo.

Te prekinitvene točke je mogoče prilagoditi prek Sassa – našli jih boste na zemljevidu Sass v naši _variables.scsstabeli slogov.

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

Za več informacij in primere o tem, kako spremeniti naše zemljevide in spremenljivke Sass, glejte razdelek Sass v dokumentaciji Grid .

Medijska vprašanja

Ker je Bootstrap najprej razvit za mobilne naprave, uporabljamo nekaj medijskih poizvedb , da ustvarimo smiselne prekinitvene točke za naše postavitve in vmesnike. Te prelomne točke večinoma temeljijo na najmanjših širinah vidnega polja in nam omogočajo povečanje elementov, ko se vidno polje spreminja.

Najmanjša širina

Bootstrap primarno uporablja naslednje obsege medijskih poizvedb – ali prelomne točke – v naših izvornih datotekah Sass za našo postavitev, mrežni sistem in 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;
  }
}

Ti miksini Sass se prevedejo v naš prevedeni CSS z uporabo vrednosti, navedenih v naših spremenljivkah Sass. Na primer:

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

Največja širina

Občasno uporabljamo medijske poizvedbe, ki gredo v drugo smer (dana velikost zaslona ali manjša ):

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

Ti miksini vzamejo te deklarirane prelomne točke, jih odštejejo .02pxin jih uporabijo kot naše max-widthvrednosti. Na primer:

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

Enotna prelomna točka

Obstajajo tudi medijske poizvedbe in miksini za ciljanje posameznega segmenta velikosti zaslona z uporabo najmanjše in največje širine prelomne točke.

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

Rezultat bo na primer @include media-breakpoint-only(md) { ... }:

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

Med prelomnimi točkami

Podobno lahko medijske poizvedbe zajemajo več širin prelomnih točk:

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

Posledica tega je:

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