Přehled
Komponenty a možnosti pro uspořádání vašeho projektu Bootstrap, včetně obalových kontejnerů, výkonného systému mřížky, flexibilního mediálního objektu a responzivních tříd obslužných programů.
Kontejnery
Kontejnery jsou nejzákladnějším prvkem rozvržení v Bootstrapu a jsou vyžadovány při použití našeho výchozího systému mřížky . Kontejnery se používají k uložení, vyložení a (někdy) vystředění obsahu v nich. I když lze kontejnery vnořit, většina rozvržení vnořený kontejner nevyžaduje.
Bootstrap se dodává se třemi různými kontejnery:
.container
, který nastavuje amax-width
u každého citlivého bodu přerušení.container-fluid
, což jewidth: 100%
ve všech bodech zlomu.container-{breakpoint}
, což jewidth: 100%
až do zadaného bodu přerušení
Níže uvedená tabulka ukazuje max-width
srovnání jednotlivých kontejnerů s originálem .container
a .container-fluid
napříč jednotlivými body přerušení.
Prohlédněte si je v akci a porovnejte je v našem příkladu mřížky .
Extra malý <576px |
Malý ≥576 pixelů |
Střední ≥768 pixelů |
Velké ≥992 pixelů |
Extra velký ≥1200px |
|
---|---|---|---|---|---|
.container |
100% | 540 pixelů | 720 pixelů | 960 pixelů | 1140 pixelů |
.container-sm |
100% | 540 pixelů | 720 pixelů | 960 pixelů | 1140 pixelů |
.container-md |
100% | 100% | 720 pixelů | 960 pixelů | 1140 pixelů |
.container-lg |
100% | 100% | 100% | 960 pixelů | 1140 pixelů |
.container-xl |
100% | 100% | 100% | 100% | 1140 pixelů |
.container-fluid |
100% | 100% | 100% | 100% | 100% |
Vše v jednom
Naše výchozí .container
třída je responzivní kontejner s pevnou šířkou, což znamená, že max-width
se mění v každém bodě přerušení.
<div class="container">
<!-- Content here -->
</div>
Tekutina
Použijte .container-fluid
pro kontejner plné šířky, pokrývající celou šířku výřezu.
<div class="container-fluid">
...
</div>
Responzivní
Responzivní kontejnery jsou v Bootstrap v4.4 novinkou. Umožňují zadat třídu, která je 100% široká, dokud není dosaženo zadaného bodu přerušení, poté použijeme max-width
s pro každý z vyšších bodů přerušení. Například .container-sm
je 100% široká pro začátek, dokud sm
není dosaženo bodu přerušení, kde se zvětší pomocí md
, lg
, a xl
.
<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>
<div class="container-xl">100% wide until extra large breakpoint</div>
Responzivní zarážky
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í.
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.
// Extra 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) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Protože naše zdrojové CSS píšeme v Sass, všechny naše mediální dotazy jsou dostupné prostřednictvím mixů Sass:
// 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) { ... }
// 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;
}
}
Občas používáme dotazy na média, které jdou opačným směrem (daná velikost obrazovky nebo menší ):
// Extra 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) { ... }
// Extra large devices (large desktops)
// No media query since the extra-large breakpoint has no upper bound on its width
min-
a max-
předpony a výřezy se zlomkovou šířkou (které se mohou za určitých podmínek vyskytnout například na zařízeních s vysokým rozlišením) pomocí hodnot s vyšší přesností pro tato srovnání. .
Opět platí, že tyto dotazy na média jsou také dostupné prostřednictvím mixů Sass:
@include media-breakpoint-down(xs) { ... }
@include media-breakpoint-down(sm) { ... }
@include media-breakpoint-down(md) { ... }
@include media-breakpoint-down(lg) { ... }
// No media query necessary for xl breakpoint as it has no upper bound on its width
// Example: Style from medium breakpoint and down
@include media-breakpoint-down(md) {
.custom-class {
display: block;
}
}
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í.
// Extra small devices (portrait phones, less than 576px)
@media (max-width: 575.98px) { ... }
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) and (max-width: 767.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) and (max-width: 991.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) and (max-width: 1199.98px) { ... }
// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }
Tyto mediální dotazy jsou také dostupné prostřednictvím mixů Sass:
@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) { ... }
Podobně mohou dotazy na média zahrnovat více šířek bodů přerušení:
// Example
// Apply styles starting from medium devices and up to extra large devices
@media (min-width: 768px) and (max-width: 1199.98px) { ... }
Mix Sass pro cílení na stejný rozsah velikostí obrazovky by byl:
@include media-breakpoint-between(md, xl) { ... }
Z-index
Několik komponent Bootstrap využívá z-index
vlastnost CSS, která pomáhá řídit rozložení tím, že poskytuje třetí osu pro uspořádání obsahu. V Bootstrapu používáme výchozí měřítko z-indexu, které bylo navrženo tak, aby správně vrstvilo navigaci, popisky a vyskakovací okna, modály a další.
Tyto vyšší hodnoty začínají na libovolném čísle, dostatečně vysoké a specifické, aby se v ideálním případě předešlo konfliktům. Potřebujeme standardní sadu těchto prvků napříč našimi vrstvenými komponentami – popisky, vyskakovací okna, navigační panely, rozevírací seznamy, modály – abychom mohli být v chování přiměřeně konzistentní. Není důvod, proč bychom nemohli použít 100
+ nebo 500
+.
Nepodporujeme přizpůsobení těchto individuálních hodnot; pokud změníte jeden, budete pravděpodobně muset změnit všechny.
$zindex-dropdown: 1000 !default;
$zindex-sticky: 1020 !default;
$zindex-fixed: 1030 !default;
$zindex-modal-backdrop: 1040 !default;
$zindex-modal: 1050 !default;
$zindex-popover: 1060 !default;
$zindex-tooltip: 1070 !default;
Abychom zvládli překrývající se hranice v rámci komponent (např. tlačítka a vstupy ve vstupních skupinách), používáme nízké jednociferné z-index
hodnoty 1
, 2
, a 3
pro výchozí stavy, přechod a aktivní stavy. Při hover/focus/active dáme konkrétní prvek do popředí s vyšší z-index
hodnotou, abychom ukázali jeho hranici nad sourozeneckými prvky.