Mejne točke
Prelomne točke so prilagodljive širine, ki določajo, kako se vaša odzivna postavitev obnaša v napravah ali velikostih vidnega polja v Bootstrapu.
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-width
v 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.
Prelomna točka | Infiks razreda | Dimenzije |
---|---|---|
X-majhen | Noben | <576 slikovnih pik |
majhna | sm |
≥576 slikovnih pik |
Srednje | md |
≥768 slikovnih pik |
Velik | lg |
≥992 slikovnih pik |
Zelo velik | xl |
≥1200 slikovnih pik |
Zelo ekstra velik | xxl |
≥1400 slikovnih pik |
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 skupnih 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.scss
tabeli 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, si oglejte 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 prekinitvene 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 .02px
in jih uporabijo kot naše max-width
vrednosti. Na primer:
// `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) { ... }
min-
in max-
predpone ter vidna okna zaobidemo z delnimi širinami (ki se lahko na primer pojavijo pod določenimi pogoji na napravah z visokim dpi) z uporabo vrednosti z večjo natančnostjo.
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) { ... }