Príklady zavádzacej mriežky

Základné rozloženia mriežky, aby ste sa zoznámili s budovaním v rámci mriežkového systému Bootstrap.

V týchto príkladoch sa .themed-grid-coltrieda pridá do stĺpcov, aby sa pridala tématika. Toto nie je trieda, ktorá je štandardne dostupná v Bootstrape.

Päť vrstiev mriežky

Systém mriežky Bootstrap má päť úrovní, jednu pre každý rozsah zariadení, ktoré podporujeme. Každá vrstva začína pri minimálnej veľkosti výrezu a automaticky sa vzťahuje na väčšie zariadenia, pokiaľ nie je prepísaná.

.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

Tri rovnaké stĺpce

Získajte tri stĺpce rovnakej šírky, začínajúce na stolných počítačoch a škálovateľné na veľké stolové počítače . Na mobilných zariadeniach, tabletoch a nižšie sa stĺpce automaticky uložia.

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

Tri nerovnaké stĺpce

Získajte tri stĺpce začínajúce na stolných počítačoch a škálovateľné na veľké plochy rôznych šírok. Pamätajte, že počet stĺpcov mriežky by mal byť až dvanásť pre jeden horizontálny blok. Viac než to a stĺpce sa začnú ukladať bez ohľadu na výrez.

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

Dva stĺpce

Získajte dva stĺpce začínajúce na stolných počítačoch a škálovateľné na veľké stolové počítače .

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

Plná šírka, jeden stĺpec

Pre prvky s plnou šírkou nie sú potrebné žiadne triedy mriežky.


Dva stĺpce s dvoma vnorenými stĺpcami

Podľa dokumentácie je vnorenie jednoduché – stačí vložiť riadok stĺpcov do existujúceho stĺpca. Získate tak dva stĺpce začínajúce na stolných počítačoch a škálovateľné na veľké stolové počítače , pričom ďalšie dva (rovnaké šírky) sú vo väčšom stĺpci.

Pri veľkostiach mobilných zariadení, tabletoch a nižších verziách sa tieto stĺpce a ich vnorené stĺpce budú ukladať.

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

Zmiešané: mobilné a stolné počítače

Mriežkový systém Bootstrap v4 má päť úrovní tried: xs (extra malý), sm (malý), md (stredný), lg (veľký) a xl (extra veľký). Na vytvorenie dynamickejších a flexibilnejších rozložení môžete použiť takmer akúkoľvek kombináciu týchto tried.

Každá vrstva tried sa zväčšuje, čo znamená, že ak plánujete nastaviť rovnaké šírky pre xs a sm, stačí zadať 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
.col-6
.col-6

Zmiešané: 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