Prijelomne točke
Prijelomne točke su prilagodljive širine koje određuju kako će se vaš responzivni izgled ponašati na različitim uređajima ili veličinama prikaza u Bootstrapu.
Temeljni koncepti
-
Prijelomne točke su sastavni dijelovi responzivnog dizajna. Upotrijebite ih za kontrolu kada se vaš izgled može prilagoditi za određeni okvir za prikaz ili veličinu uređaja.
-
Upotrijebite medijske upite za arhitekturu svog CSS-a prema prijelomnoj točki. Medijski upiti značajka su CSS-a koja vam omogućuje uvjetnu primjenu stilova na temelju skupa parametara preglednika i operativnog sustava. Najčešće koristimo
min-width
u našim medijskim upitima. -
Mobitel na prvom mjestu, cilj je responzivni dizajn. Bootstrapov CSS ima za cilj primijeniti minimum stilova kako bi raspored funkcionirao na najmanjoj prijelomnoj točki, a zatim nanosi slojeve na stilove kako bi prilagodio taj dizajn za veće uređaje. Ovo optimizira vaš CSS, poboljšava vrijeme prikazivanja i pruža sjajno iskustvo za vaše posjetitelje.
Dostupne prijelomne točke
Bootstrap uključuje šest zadanih prijelomnih točaka, koje se ponekad nazivaju razinama mreže , za responzivnu izgradnju. Ove se prijelomne točke mogu prilagoditi ako koristite naše izvorne Sass datoteke.
Prijelomna točka | Infiks klase | Dimenzije |
---|---|---|
X-mali | Nijedan | <576 px |
Mali | sm |
≥576 px |
Srednji | md |
≥768 px |
velika | lg |
≥992 px |
Jako veliko | xl |
≥1200 px |
Ekstra ekstra veliki | xxl |
≥1400 px |
Svaka prijelomna točka odabrana je tako da udobno drži spremnike čije su širine višekratnici 12. Prijelomne točke također predstavljaju podskup uobičajenih veličina uređaja i dimenzija okvira za prikaz—ne ciljaju posebno svaki slučaj upotrebe ili uređaj. Umjesto toga, rasponi pružaju snažnu i dosljednu osnovu za nadogradnju za gotovo svaki uređaj.
Ove se prijelomne točke 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 primjere o tome kako modificirati naše Sass mape i varijable, pogledajte odjeljak Sass u Grid dokumentaciji .
Medijski upiti
Budući da je Bootstrap prvo razvijen da bude mobilni, koristimo nekoliko medijskih upita za stvaranje razumnih prijelomnih točaka za naše izglede i sučelja. Ove prijelomne točke uglavnom se temelje na minimalnim širinama okvira za prikaz i omogućuju nam povećavanje elemenata kako se okvir za prikaz mijenja.
Min. širina
Bootstrap prvenstveno koristi sljedeće raspone medijskih upita—ili prijelomne točke—u našim izvornim Sass datotekama za naš izgled, mrežni sustav 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š kompilirani 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 (dana veličina zaslona ili manja ):
// 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 prijelomne točke, oduzimaju .02px
ih i koriste ih kao naše max-width
vrijednosti. Na primjer:
// 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
min-
i max-
prefikse i okvire za prikaz s frakcijskim širinama (što se može dogoditi pod određenim uvjetima na uređajima s visokim dpi-jem, na primjer) korištenjem vrijednosti s većom preciznošću.
Jedna prijelomna točka
Također postoje medijski upiti i mixini za ciljanje jednog segmenta veličina zaslona koristeći minimalnu i maksimalnu širinu prijelomne 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) { ... }
Na primjer, @include media-breakpoint-only(md) { ... }
rezultat će biti:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Između prijelomnih točaka
Slično, medijski upiti mogu obuhvaćati više širina prijelomnih točaka:
@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) { ... }