Prijelomne točke

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-widthu 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.

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.scsstablici 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 primarno 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 .02pxih i koriste ih kao naše max-widthvrijednosti. 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) { ... }

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