Pikat e ndërprerjes

Konceptet thelbësore

• Pikat e ndërprerjes janë blloqet e ndërtimit të dizajnit të përgjegjshëm. Përdorni ato për të kontrolluar se kur mund të përshtatet faqosja juaj në një pamje të caktuar ose madhësi pajisjeje.

• Përdorni pyetjet e medias për të arkitekturuar CSS-në tuaj sipas pikës së ndërprerjes. Pyetjet e medias janë një veçori e CSS që ju lejojnë të aplikoni me kusht stilet bazuar në një grup parametrash të shfletuesit dhe sistemit operativ. Ne përdorim më së shpeshti min-widthnë pyetjet tona në media.

• Së pari celulari, dizajni i përgjegjshëm është qëllimi. CSS e Bootstrap synon të aplikojë minimumin e stileve për të bërë një paraqitje të funksionojë në pikën më të vogël të ndërprerjes dhe më pas të vendosë stile për të rregulluar atë dizajn për pajisjet më të mëdha. Kjo optimizon CSS-në tuaj, përmirëson kohën e paraqitjes dhe ofron një përvojë të shkëlqyer për vizitorët tuaj.

Pikat e disponueshme të ndërprerjes

Bootstrap përfshin gjashtë pika ndërprerjeje të paracaktuara, ndonjëherë të referuara si nivele të rrjetit , për ndërtimin në mënyrë të përgjegjshme. Këto pika ndërprerjeje mund të personalizohen nëse jeni duke përdorur skedarët tanë burimor Sass.

Çdo pikë ndërprerjeje u zgjodh për të mbajtur të qetë kontejnerët, gjerësia e të cilëve është shumëfish i 12. Pikat e ndërprerjes janë gjithashtu përfaqësuese të një nëngrupi të madhësive të zakonshme të pajisjes dhe dimensioneve të pamjes - ato nuk synojnë në mënyrë specifike çdo rast përdorimi ose pajisje. Në vend të kësaj, sferat ofrojnë një bazë të fortë dhe të qëndrueshme për t'u ndërtuar për pothuajse çdo pajisje.

Këto pika shkëputjeje janë të personalizueshme nëpërmjet Sass—do t'i gjeni në një hartë Sass në fletën tonë të _variables.scssstilit.

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

Për më shumë informacion dhe shembuj se si të modifikojmë hartat dhe variablat tona Sass, ju lutemi referojuni seksionit Sass të dokumentacionit Grid .

Pyetjet në media

Meqenëse Bootstrap është zhvilluar për të qenë fillimisht celular, ne përdorim një pjesë të vogël të pyetjeve të medias për të krijuar pika ndërprerjesh të ndjeshme për paraqitjet dhe ndërfaqet tona. Këto pika të ndërprerjes bazohen kryesisht në gjerësinë minimale të portave të pamjes dhe na lejojnë të përshkallëzojmë elementet ndërsa porta e pamjes ndryshon.

Min-gjerësia

Bootstrap kryesisht përdor intervalet e mëposhtme të pyetjeve të medias—ose pikat e ndërprerjes—në skedarët tanë burimor Sass për paraqitjen, sistemin e rrjetit dhe komponentët tanë.

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

Këto përzierje Sass përkthehen në CSS-në tonë të përpiluar duke përdorur vlerat e deklaruara në variablat tona Sass. Për shembull:

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

Gjerësia maksimale

Ne përdorim herë pas here pyetje mediatike që shkojnë në drejtimin tjetër (madhësia e dhënë e ekranit ose më e vogël ):

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

Këto përzierje marrin pikat e deklaruara të ndërprerjes, zbresin .02pxprej tyre dhe i përdorin ato si max-widthvlerat tona. Për shembull:

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

Pika e vetme e ndërprerjes

Ekzistojnë gjithashtu pyetje dhe miks media për të synuar një segment të vetëm të madhësive të ekranit duke përdorur gjerësinë minimale dhe maksimale të pikës së ndërprerjes.

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

Për shembull, @include media-breakpoint-only(md) { ... }do të rezultojë në:

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

Midis pikave të ndërprerjes

Në mënyrë të ngjashme, pyetjet e medias mund të përfshijnë gjerësi të shumëfishta pikash:

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

Që rezulton në:

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