Body zlomu

Základné koncepty

• Body zlomu sú stavebnými kameňmi responzívneho dizajnu. Pomocou nich môžete ovládať, kedy je možné prispôsobiť rozloženie konkrétnemu výrezu alebo veľkosti zariadenia.

• Použite mediálne dopyty na architektúru CSS podľa bodu prerušenia. Dotazy na médiá sú funkciou CSS, ktorá vám umožňuje podmienene aplikovať štýly na základe súboru parametrov prehliadača a operačného systému. Najčastejšie používame min-widthv našich mediálnych dopytoch.

• Cieľom je predovšetkým mobilný, responzívny dizajn. CSS Bootstrap sa zameriava na použitie úplného minima štýlov, aby rozloženie fungovalo pri najmenšom bode prerušenia, a potom na vrstvenie štýlov, aby sa tento dizajn upravil pre väčšie zariadenia. To optimalizuje váš CSS, skracuje čas vykresľovania a poskytuje skvelý zážitok pre vašich návštevníkov.

Dostupné body prerušenia

Bootstrap obsahuje šesť predvolených bodov prerušenia, niekedy označovaných ako vrstvy mriežky , na rýchle budovanie. Tieto body prerušenia je možné prispôsobiť, ak používate naše zdrojové súbory Sass.

Každý bod zlomu bol vybraný tak, aby pohodlne držal kontajnery, ktorých šírky sú násobky 12. Body zlomu sú tiež reprezentatívne pre podmnožinu bežných veľkostí zariadení a rozmerov výrezu – nie sú konkrétne zamerané na každý prípad použitia alebo zariadenie. Namiesto toho tieto rady poskytujú silný a konzistentný základ, na ktorom možno stavať takmer každé zariadenie.

Tieto body prerušenia sú prispôsobiteľné cez Sass – nájdete ich na mape Sass v našej šablóne so _variables.scssštýlmi.

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

Ďalšie informácie a príklady, ako upraviť naše mapy a premenné Sass, nájdete v sekcii Sass v dokumentácii Grid .

Mediálne otázky

Keďže Bootstrap je vyvinutý ako prvý pre mobilné zariadenia, používame niekoľko mediálnych dopytov na vytvorenie rozumných bodov prerušenia pre naše rozloženia a rozhrania. Tieto body prerušenia sú väčšinou založené na minimálnych šírkach výrezu a umožňujú nám zväčšovať prvky pri zmene výrezu.

Min-šírka

Bootstrap primárne používa nasledujúce rozsahy mediálnych dopytov – alebo body prerušenia – v našich zdrojových súboroch Sass pre naše rozloženie, mriežkový systém a komponenty.

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

Tieto zmesi Sass sa prekladajú v našom kompilovanom CSS pomocou hodnôt deklarovaných v našich premenných Sass. Napríklad:

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

Maximálna šírka

Občas používame mediálne dopyty, ktoré idú opačným smerom (daná veľkosť obrazovky alebo menšia ):

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

Tieto mixiny berú tieto deklarované body prerušenia, odčítajú .02pxod nich a používajú ich ako naše max-widthhodnoty. Napríklad:

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

Jediný bod zlomu

Existujú aj mediálne dopyty a mixiny na zacielenie na jeden segment veľkostí obrazoviek s použitím minimálnej a maximálnej šírky bodu zlomu.

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

@include media-breakpoint-only(md) { ... }Výsledkom bude napríklad :

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

Medzi bodmi prerušenia

Podobne môžu mediálne dopyty pokrývať viacero šírok bodov prerušenia:

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

Čo má za následok:

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