Primeri mrež Bootstrap
Osnovne postavitve mrež za seznanitev z gradnjo znotraj omrežnega sistema Bootstrap.
V teh primerih je .themed-grid-col
razred dodan stolpcem, da doda nekaj tematizacije. To ni razred, ki je privzeto na voljo v programu Bootstrap.
Pet stopenj mreže
Mrežni sistem Bootstrap ima pet stopenj, po eno za vsako vrsto naprav, ki jih podpiramo. Vsaka stopnja se začne pri najmanjši velikosti vidnega polja in samodejno velja za večje naprave, razen če je preglasena.
Trije enaki stolpci
Pridobite tri enako široke stolpce, ki se začnejo pri namizjih in se povečajo na velika namizja . V mobilnih napravah, tablicah in starejših se stolpci samodejno zložijo.
Alternativa trem enakim stolpcem
Z uporabo .row-cols-*
razredov lahko preprosto ustvarite mrežo z enakimi stolpci.
.col
otrok od
.row-cols-md-3
.col
otrok od
.row-cols-md-3
.col
otrok od
.row-cols-md-3
Trije neenaki stolpci
Dobite tri stolpce, ki se začnejo pri namizjih in se razširijo na velika namizja različnih širin. Ne pozabite, da bi moralo biti število stolpcev mreže za en vodoravni blok dvanajst. Še več, stolpci se začnejo zlagati ne glede na vidno polje.
Dva stolpca
Dobite dva stolpca, ki se začneta pri namizjih in se prilagajata velikim namizjem .
Polna širina, en stolpec
Za elemente polne širine niso potrebni nobeni mrežni razredi.
Dva stolpca z dvema ugnezdenima stolpcema
V skladu z dokumentacijo je gnezdenje enostavno – samo postavite vrstico stolpcev znotraj obstoječega stolpca. Tako dobite dva stolpca, ki se začneta pri namizjih in se povečata na velika namizja , s še dvema (enake širine) znotraj večjega stolpca.
Pri velikostih mobilnih naprav, tabličnih računalnikih in manj, se ti stolpci in njihovi ugnezdeni stolpci zložijo.
Mešano: mobilni in namizni
Mrežni sistem Bootstrap v4 ima pet stopenj razredov: xs (zelo majhen, ta infiks razreda se ne uporablja), sm (majhen), md (srednji), lg (velik) in xl (zelo velik). Za ustvarjanje bolj dinamičnih in prilagodljivih postavitev lahko uporabite skoraj katero koli kombinacijo teh razredov.
Vsaka stopnja razredov se povečuje, kar pomeni, da če nameravate nastaviti enake širine za md, lg in xl, morate podati le md.
Mešano: mobilni, tablični in namizni računalniki
Žlebovi
S .gx-*
razredi je mogoče vodoravne žlebove prilagoditi.
.col
z
.gx-4
žlebovi
.col
z
.gx-4
žlebovi
.col
z
.gx-4
žlebovi
.col
z
.gx-4
žlebovi
.col
z
.gx-4
žlebovi
.col
z
.gx-4
žlebovi
Uporabite .gy-*
razrede za nadzor navpičnih žlebov.
.col
z
.gy-4
žlebovi
.col
z
.gy-4
žlebovi
.col
z
.gy-4
žlebovi
.col
z
.gy-4
žlebovi
.col
z
.gy-4
žlebovi
.col
z
.gy-4
žlebovi
S .g-*
razredi se lahko prilagodijo žlebovi v obe smeri.
.col
z
.g-3
žlebovi
.col
z
.g-3
žlebovi
.col
z
.g-3
žlebovi
.col
z
.g-3
žlebovi
.col
z
.g-3
žlebovi
.col
z
.g-3
žlebovi
Zabojniki
Dodatni razredi, dodani v Bootstrap v4.4, omogočajo vsebnike, ki so 100 % široki do določene prelomne točke. v5 doda novo xxl
prekinitveno točko.