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.
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á.
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.
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.
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 .
Pre prvky s plnou šírkou nie sú potrebné žiadne triedy mriežky.
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ť.
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.
Ďalšie triedy pridané v Bootstrap v4.4 umožňujú kontajnery, ktoré sú 100% široké až do konkrétneho bodu prerušenia.