Pārtraukuma punkti

Pamatjēdzieni

• Pārtraukuma punkti ir atsaucīga dizaina pamatelementi. Izmantojiet tos, lai kontrolētu, kad jūsu izkārtojumu var pielāgot konkrētam skata logam vai ierīces izmēram.

• Izmantojiet multivides vaicājumus, lai izveidotu savu CSS pēc pārtraukuma punkta. Multivides vaicājumi ir CSS funkcija, kas ļauj nosacīti lietot stilus, pamatojoties uz pārlūkprogrammas un operētājsistēmas parametru kopu. Mēs visbiežāk izmantojam min-widthmūsu mediju vaicājumos.

• Pirmkārt, mobilās ierīces, mērķis ir adaptīvs dizains. Bootstrap CSS mērķis ir izmantot minimālo stilu, lai izkārtojums darbotos mazākajā pārtraukuma punktā, un pēc tam slāņos uz stiliem, lai pielāgotu šo dizainu lielākām ierīcēm. Tas optimizē jūsu CSS, uzlabo renderēšanas laiku un nodrošina lielisku pieredzi jūsu apmeklētājiem.

Pieejamie pārtraukuma punkti

Sāknēšanas programmā Bootstrap ir iekļauti seši noklusējuma pārtraukuma punkti, kurus dažreiz dēvē par režģa līmeņiem , lai veidotu atsaucīgu. Šos pārtraukuma punktus var pielāgot, ja izmantojat mūsu avota Sass failus.

Katrs pārtraukuma punkts tika izvēlēts tā, lai ērti turētu konteinerus, kuru platums ir 12 reizes. Pārtraukuma punkti atspoguļo arī izplatītāko ierīču izmēru un skata loga izmēru apakškopu — tie nav īpaši paredzēti katram lietošanas gadījumam vai ierīcei. Tā vietā diapazoni nodrošina spēcīgu un konsekventu pamatu gandrīz jebkurai ierīcei.

Šos pārtraukuma punktus var pielāgot, izmantojot Sass — tos atradīsit mūsu _variables.scssstila lapas Sass kartē.

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px
);

Lai iegūtu papildinformāciju un piemērus par to, kā modificēt mūsu Sass kartes un mainīgos, lūdzu, skatiet Grid dokumentācijas Sass sadaļu .

Mediju vaicājumi

Tā kā Bootstrap vispirms ir izstrādāts, lai tas būtu mobilais, mēs izmantojam dažus multivides vaicājumus , lai izveidotu saprātīgus pārtraukuma punktus mūsu izkārtojumiem un saskarnēm. Šie pārtraukuma punkti galvenokārt ir balstīti uz minimālo skata loga platumu un ļauj mums palielināt elementus, mainoties skata logam.

Minimālais platums

Bootstrap mūsu izkārtojumam, režģa sistēmai un komponentiem mūsu avota Sass failos galvenokārt izmanto šādus multivides vaicājumu diapazonus vai pārtraukumpunktus.

// 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;
  }
}

Šie Sass mixins tiek tulkoti mūsu apkopotajā CSS, izmantojot vērtības, kas deklarētas mūsu Sass mainīgajos. Piemēram:

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

Maksimālais platums

Mēs laiku pa laikam izmantojam multivides vaicājumus, kas virzās citā virzienā (norādītais ekrāna izmērs vai mazāks ):

// 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;
  }
}

Šie mixīni ņem deklarētos pārtraukuma punktus, atņem .02pxno tiem un izmanto tos kā mūsu max-widthvērtības. Piemēram:

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

Viens pārtraukuma punkts

Ir arī multivides vaicājumi un kombinācijas, lai atlasītu vienu ekrāna izmēru segmentu, izmantojot minimālo un maksimālo pārtraukumpunkta platumu.

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

Piemēram @include media-breakpoint-only(md) { ... }, rezultāts būs:

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

Starp pārtraukuma punktiem

Līdzīgi multivides vaicājumi var aptvert vairākus pārtraukuma punktu platumus:

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

Kā rezultātā:

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