Body zlomu
Body přerušení jsou přizpůsobitelné šířky, které určují, jak se vaše responzivní rozvržení chová na různých zařízeních nebo velikostech výřezů v Bootstrapu.
Základní pojmy
-
Body zlomu jsou stavebními kameny responzivního designu. Použijte je k ovládání, kdy lze vaše rozvržení přizpůsobit konkrétnímu výřezu nebo velikosti zařízení.
-
Pomocí mediálních dotazů vytvořte svůj CSS podle bodu přerušení. Dotazy na média jsou funkcí CSS, která vám umožňuje podmíněně aplikovat styly na základě sady parametrů prohlížeče a operačního systému. Nejčastěji používáme
min-width
v našich mediálních dotazech. -
Cílem je především mobilní, responzivní design. CSS Bootstrapu si klade za cíl použít naprosté minimum stylů, aby rozložení fungovalo na nejmenším bodu přerušení, a poté na styly vrstvit, aby se tento návrh upravil pro větší zařízení. To optimalizuje vaše CSS, zkracuje dobu vykreslování a poskytuje návštěvníkům skvělý zážitek.
Dostupné body přerušení
Bootstrap obsahuje šest výchozích bodů přerušení, někdy označovaných jako vrstvy mřížky , pro responzivní budování. Tyto body přerušení lze přizpůsobit, pokud používáte naše zdrojové soubory Sass.
Bod zlomu | Infix třídy | Rozměry |
---|---|---|
X-Small | Žádný | <576 pixelů |
Malý | sm |
≥576 pixelů |
Střední | md |
≥768 pixelů |
Velký | lg |
≥992 pixelů |
Extra velké | xl |
≥1200 pixelů |
Extra extra velké | xxl |
≥1400 pixelů |
Každý bod přerušení byl vybrán tak, aby pohodlně držel kontejnery, jejichž šířky jsou násobky 12. Body přerušení také reprezentují podmnožinu běžných velikostí zařízení a rozměrů zobrazovacích polí – nezaměřují se konkrétně na každý případ použití nebo zařízení. Namísto toho tyto řady poskytují silný a konzistentní základ, na kterém lze stavět téměř pro každé zařízení.
Tyto body přerušení lze přizpůsobit pomocí Sass – najdete je na mapě Sass v naší _variables.scss
šabloně stylů.
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 992px,
xl: 1200px,
xxl: 1400px
);
Další informace a příklady, jak upravit naše mapy a proměnné Sass, naleznete v sekci Sass v dokumentaci Grid .
Mediální dotazy
Vzhledem k tomu, že Bootstrap je vyvinut jako první pro mobilní zařízení, používáme několik mediálních dotazů k vytvoření rozumných bodů přerušení pro naše rozvržení a rozhraní. Tyto body přerušení jsou většinou založeny na minimální šířce výřezu a umožňují nám zvětšovat prvky podle toho, jak se výřez mění.
Min. šířka
Bootstrap primárně používá následující rozsahy dotazů na média – nebo body přerušení – v našich zdrojových souborech Sass pro naše rozvržení, mříž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;
}
}
Tyto mixiny Sass se překládají v našem kompilovaném CSS pomocí hodnot deklarovaných v našich proměnných Sass. Napří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ální šířka
Občas používáme dotazy na média, které jdou opačným směrem (daná velikost obrazovky nebo menší ):
// 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;
}
}
Tyto mixiny berou tyto deklarované body přerušení, odečítají .02px
od nich a používají je jako naše max-width
hodnoty. Napří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) { ... }
min-
a max-
předpony a výřezy se zlomkovou šířkou (k nimž může dojít za určitých podmínek například na zařízeních s vysokým rozlišením) pomocí hodnot s vyšší přesností.
Jediný bod zlomu
Existují také dotazy na média a mixiny pro cílení na jeden segment velikostí obrazovek pomocí minimální a maximální šířky bodu přerušení.
@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) { ... }
Výsledkem bude například @include media-breakpoint-only(md) { ... }
:
@media (min-width: 768px) and (max-width: 991.98px) { ... }
Mezi body zlomu
Podobně mohou dotazy na média zahrnovat více šířek bodů přerušení:
@include media-breakpoint-between(md, xl) { ... }
Což má za následek:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }