Prelomne tačke

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

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.scsstablici 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 .02pxod njih 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) { ... }

Single breakpoint

There are also media queries and mixins for targeting a single segment of screen sizes using the minimum and maximum breakpoint widths.

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

For example the @include media-breakpoint-only(md) { ... } will result in :

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

Between breakpoints

Similarly, media queries may span multiple breakpoint widths:

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

Which results in:

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