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

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

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 v4 má pět úrovní tříd: xs (extra malý), 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 xs a sm, stačí zadat pouze xs.

.col-12 .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-12 .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