Příklady zaváděcí mřížky
Základní rozvržení mřížky, které vás seznámí s budováním v systému mřížky Bootstrap.
V těchto příkladech je .themed-grid-col
třída přidána do sloupců, aby se přidalo nějaké téma. Toto není třída, která je standardně dostupná v Bootstrapu.
Pět vrstev mřížky
Systém mřížky Bootstrap má pět úrovní, jednu pro každou řadu zařízení, která podporujeme. Každá vrstva začíná na minimální velikosti výřezu a automaticky se vztahuje na větší zařízení, pokud není přepsána.
Tři stejné sloupce
Získejte tři sloupce stejné šířky počínaje stolními počítači a škálovat na velké stolní počítače . Na mobilních zařízeních, tabletech a níže se sloupce automaticky skládají.
Alternativa tří stejných sloupců
Pomocí .row-cols-*
tříd můžete snadno vytvořit mřížku se stejnými sloupci.
.col
dítě z
.row-cols-md-3
.col
dítě z
.row-cols-md-3
.col
dítě z
.row-cols-md-3
Tři nestejné sloupce
Získejte tři sloupce počínaje stolními počítači a škálovat na velké stolní počítače různých šířek. Pamatujte, že sloupců mřížky by se mělo přidat až dvanáct pro jeden vodorovný blok. Více než to a sloupce se začnou skládat bez ohledu na výřez.
Dva sloupce
Získejte dva sloupce počínaje stolními počítači a škálovat na velké stolní počítače .
Plná šířka, jeden sloupec
Pro prvky s plnou šířkou nejsou nutné žádné třídy mřížky.
Dva sloupce se dvěma vnořenými sloupci
Podle dokumentace je vnoření snadné – stačí vložit řadu sloupců do existujícího sloupce. Získáte tak dva sloupce začínající na stolních počítačích a škálovatelné na velké stolní počítače s dalšími dvěma (stejné šířky) ve větším sloupci.
U velikostí mobilních zařízení, tabletů a nižších velikostí se tyto sloupce a jejich vnořené sloupce složí.
Smíšené: mobilní a stolní
Mřížkový systém Bootstrap v4 má pět úrovní tříd: xs (extra malý, tento infix třídy se nepoužívá), sm (malý), md (střední), lg (velký) a xl (extra velký). K vytvoření dynamičtějších a flexibilnějších rozvržení můžete použít téměř jakoukoli kombinaci těchto tříd.
Každá vrstva tříd se zvětšuje, což znamená, že pokud plánujete nastavit stejné šířky pro md, lg a xl, stačí zadat pouze md.
Smíšené: mobil, tablet a počítač
Žlaby
U .gx-*
tříd lze upravit vodorovné žlaby.
.col
s
.gx-4
okapy
.col
s
.gx-4
okapy
.col
s
.gx-4
okapy
.col
s
.gx-4
okapy
.col
s
.gx-4
okapy
.col
s
.gx-4
okapy
Použijte .gy-*
třídy k ovládání vertikálních žlabů.
.col
s
.gy-4
okapy
.col
s
.gy-4
okapy
.col
s
.gy-4
okapy
.col
s
.gy-4
okapy
.col
s
.gy-4
okapy
.col
s
.gy-4
okapy
U .g-*
tříd lze žlaby v obou směrech upravit.
.col
s
.g-3
okapy
.col
s
.g-3
okapy
.col
s
.g-3
okapy
.col
s
.g-3
okapy
.col
s
.g-3
okapy
.col
s
.g-3
okapy
Kontejnery
Další třídy přidané v Bootstrap v4.4 umožňují kontejnery, které jsou 100% široké až do určitého bodu přerušení. v5 přidá nový xxl
bod přerušení.