Prelomne tačke
Prelomne tačke su prilagodljive širine koje određuju kako se vaš responzivni izgled ponaša na različitim uređajima ili veličinama polja prikaza u Bootstrapu.
Osnovni koncepti
-
Prelomne tačke su gradivni blokovi responzivnog dizajna. Koristite ih da biste kontrolirali kada se vaš izgled može prilagoditi na određenoj površini prikaza ili veličini uređaja.
-
Koristite medijske upite za arhitekturu vašeg CSS-a pomoću tačke prekida. Medijski upiti su karakteristika CSS-a koja vam omogućava da uslovno primenite stilove na osnovu skupa parametara pretraživača i operativnog sistema. Najčešće koristimo
min-width
u našim medijskim upitima. -
Mobilni prije svega, responzivni dizajn je cilj. Bootstrap-ov CSS ima za cilj da primeni minimalan broj stilova kako bi izgled radio na najmanjoj tački prekida, a zatim slojeve na stilove kako bi prilagodio taj dizajn za veće uređaje. Ovo optimizuje vaš CSS, poboljšava vreme renderovanja i pruža odlično iskustvo za vaše posetioce.
Dostupne tačke prekida
Bootstrap uključuje šest zadanih tačaka prekida, koje se ponekad nazivaju i slojevi mreže , za izgradnju odgovorno. Ove tačke prekida se mogu prilagoditi ako koristite naše izvorne Sass datoteke.
Tačka prekida | Class infix | Dimenzije |
---|---|---|
X-Small | Nema | <576px |
Mala | sm |
≥576px |
Srednje | md |
≥768px |
Veliko | lg |
≥992px |
Ekstra veliki | xl |
≥1200px |
Ekstra ekstra veliki | xxl |
≥1400px |
Svaka tačka prekida je odabrana da udobno drži kontejnere čije su širine višestruke od 12. Prelomne tačke su takođe reprezentativne za podskup uobičajenih veličina uređaja i dimenzija prozora – one ne ciljaju posebno svaki slučaj upotrebe ili uređaj. Umjesto toga, rasponi pružaju snažnu i dosljednu osnovu na kojoj se može nadograđivati gotovo svaki uređaj.
Ove tačke prekida se mogu prilagoditi putem Sass-a—naći ćete ih u Sass mapi u našoj _variables.scss
tablici stilova.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Za više informacija i primjera o tome kako modificirati naše Sass mape i varijable, pogledajte odjeljak Sass u Grid dokumentaciji .
Medijski upiti
Budući da je Bootstrap razvijen da bude prvi mobilni, koristimo pregršt medijskih upita da kreiramo razumne tačke prekida za naše izglede i interfejse. Ove tačke preloma su uglavnom zasnovane na minimalnim širinama okvira za prikaz i omogućavaju nam da uvećamo elemente kako se prozorčić menja.
Minimalna širina
Bootstrap prvenstveno koristi sljedeće opsege medijskih upita – ili tačke prekida – u našim izvornim Sass datotekama za naš raspored, sistem mreže i 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;
}
}
Ovi Sass miksini prevode se u naš prevedeni CSS koristeći vrijednosti deklarirane u našim Sass varijablama. Na primjer:
// 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) { ... }
Maksimalna širina
Povremeno koristimo medijske upite koji idu u drugom smjeru (data veličina ekrana ili manji ):
// 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;
}
}
Ovi miksini uzimaju te deklarirane tačke prekida, oduzimaju .02px
od njih i koriste ih kao naše max-width
vrijednosti. Na primjer:
// `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-
i max-
prefikse i okvire prikaza s razlomcima širine (što se može dogoditi pod određenim uvjetima na uređajima s visokim dpi, na primjer) koristeći vrijednosti s većom preciznošću.
Jedna tačka prekida
Postoje i medijski upiti i miksevi za ciljanje jednog segmenta veličine ekrana koristeći minimalnu i maksimalnu širinu tačke prekida.
@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) { ... }
Na primjer @include media-breakpoint-only(md) { ... }
, rezultat će biti:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Između tačaka prekida
Slično, medijski upiti mogu obuhvatiti više širina tačaka prekida:
@include media-breakpoint-between(md, xl) { ... }
Što rezultira:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }