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
.col-xxl-4
.col-xxl-4
.col-xxl-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

Alternatíva troch rovnakých stĺpcov

Pomocou .row-cols-*tried môžete ľahko vytvoriť mriežku s rovnakými stĺpcami.

.coldieťa z .row-cols-md-3
.coldieťa z .row-cols-md-3
.coldieťa z .row-cols-md-3

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 v5 má šesť úrovní tried: xs (extra malý, táto infix triedy sa nepoužíva), sm (malý), md (stredný), lg (veľký), xl (x-veľký) a xxl (xx -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 md, lg, xl a xxl, musíte zadať iba md.

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

Odkvapy

S .gx-*triedami je možné upraviť horizontálne odkvapy.

.cols .gx-4odkvapmi
.cols .gx-4odkvapmi
.cols .gx-4odkvapmi
.cols .gx-4odkvapmi
.cols .gx-4odkvapmi
.cols .gx-4odkvapmi

Použite .gy-*triedy na ovládanie vertikálnych odkvapov.

.cols .gy-4odkvapmi
.cols .gy-4odkvapmi
.cols .gy-4odkvapmi
.cols .gy-4odkvapmi
.cols .gy-4odkvapmi
.cols .gy-4odkvapmi

Pri .g-*triedach je možné upraviť odkvapy v oboch smeroch.

.cols .g-3odkvapmi
.cols .g-3odkvapmi
.cols .g-3odkvapmi
.cols .g-3odkvapmi
.cols .g-3odkvapmi
.cols .g-3odkvapmi

Kontajnery

Ďalšie triedy pridané v Bootstrap v4.4 umožňujú kontajnery, ktoré sú 100% široké až do konkrétneho bodu prerušenia. v5 pridáva nový xxlbod prerušenia.

.kontajner
.kontajner-sm
.kontajner-md
.kontajner-lg
.kontajner-xl
.kontajner-xxl
.nádoba-tekutina