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-coltří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.

.col-4
.col-4
.col-4
.col-sm-4
.col-sm-4
.col-sm-4
.col-md-4
.col-md-4
.col-md-4
.col-lg-4
.col-lg-4
.col-lg-4
.col-xl-4
.col-xl-4
.col-xl-4
.col-xxl-4
.col-xxl-4
.col-xxl-4

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 nižších verzích se sloupce automaticky skládají.

.col-md-4
.col-md-4
.col-md-4

Alternativa tří stejných sloupců

Pomocí .row-cols-*tříd můžete snadno vytvořit mřížku se stejnými sloupci.

.coldítě z .row-cols-md-3
.coldítě z .row-cols-md-3
.coldí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.

.col-md-3
.col-md-6
.col-md-3

Dva sloupce

Získejte dva sloupce počínaje stolními počítači a škálovat na velké stolní počítače .

.col-md-8
.col-md-4

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ží.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Smíšené: mobilní a stolní

Mřížkový systém Bootstrap v5 má šest úrovní tříd: xs (extra malý, tento infix třídy se nepoužívá), sm (malý), md (střední), lg (velký), xl (x-large) a xxl (xx). -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, xl a xxl, stačí zadat pouze md.

.col-md-8
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.col-6 .col-md-4
.sl.-6
.sl.-6

Smíšené: mobil, tablet a počítač

.col-sm-6 .col-lg-8
.col-6.col-lg-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Žlaby

U .gx-*tříd lze upravit vodorovné žlaby.

.cols .gx-4okapy
.cols .gx-4okapy
.cols .gx-4okapy
.cols .gx-4okapy
.cols .gx-4okapy
.cols .gx-4okapy

Použijte .gy-*třídy k ovládání vertikálních žlabů.

.cols .gy-4okapy
.cols .gy-4okapy
.cols .gy-4okapy
.cols .gy-4okapy
.cols .gy-4okapy
.cols .gy-4okapy

U .g-*tříd lze žlaby v obou směrech upravit.

.cols .g-3okapy
.cols .g-3okapy
.cols .g-3okapy
.cols .g-3okapy
.cols .g-3okapy
.cols .g-3okapy

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ý xxlbod přerušení.

.kontejner
.kontejner-sm
.container-md
.container-lg
.kontejner-xl
.kontejner-xxl
.nádoba-tekutina