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-col
trieda 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á.
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.
Alternatíva troch rovnakých stĺpcov
Pomocou .row-cols-*
tried môžete ľahko vytvoriť mriežku s rovnakými stĺpcami.
.col
dieťa z
.row-cols-md-3
.col
dieťa z
.row-cols-md-3
.col
dieť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.
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 .
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 vkladanie 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ť.
Zmiešané: mobilné a stolné počítače
Gridový systém Bootstrap v4 má päť úrovní tried: xs (extra malá, táto infix triedy sa nepoužíva), 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 md, lg a xl, musíte zadať iba md.
Zmiešané: mobil, tablet a počítač
Odkvapy
S .gx-*
triedami je možné upraviť horizontálne odkvapy.
.col
s
.gx-4
odkvapmi
.col
s
.gx-4
odkvapmi
.col
s
.gx-4
odkvapmi
.col
s
.gx-4
odkvapmi
.col
s
.gx-4
odkvapmi
.col
s
.gx-4
odkvapmi
Použite .gy-*
triedy na ovládanie vertikálnych odkvapov.
.col
s
.gy-4
odkvapmi
.col
s
.gy-4
odkvapmi
.col
s
.gy-4
odkvapmi
.col
s
.gy-4
odkvapmi
.col
s
.gy-4
odkvapmi
.col
s
.gy-4
odkvapmi
Pri .g-*
triedach je možné upraviť odkvapy v oboch smeroch.
.col
s
.g-3
odkvapmi
.col
s
.g-3
odkvapmi
.col
s
.g-3
odkvapmi
.col
s
.g-3
odkvapmi
.col
s
.g-3
odkvapmi
.col
s
.g-3
odkvapmi
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ý xxl
bod prerušenia.