Primjeri Bootstrap mreže
Osnovni rasporedi rešetki za upoznavanje s gradnjom unutar Bootstrap sustava rešetki.
U ovim primjerima .themed-grid-col
klasa se dodaje stupcima kako bi se dodala tema. Ovo nije klasa koja je prema zadanim postavkama dostupna u Bootstrapu.
Pet slojeva mreže
Postoji pet razina mrežnog sustava Bootstrap, po jedna za svaki niz uređaja koje podržavamo. Svaka razina počinje s minimalnom veličinom okvira za prikaz i automatski se primjenjuje na veće uređaje osim ako se ne poništi.
Tri jednaka stupca
Nabavite tri stupca jednake širine počevši od stolnih računala i skalirajući do velikih stolnih računala . Na mobilnim uređajima, tabletima i nižim stupci će se automatski slagati.
Alternativa tri jednaka stupca
Korištenjem .row-cols-*
klasa možete jednostavno stvoriti mrežu s jednakim stupcima.
.col
dijete od
.row-cols-md-3
.col
dijete od
.row-cols-md-3
.col
dijete od
.row-cols-md-3
Tri nejednaka stupca
Nabavite tri stupca počevši od stolnih računala i skalirajući do velikih stolnih računala različitih širina. Upamtite, zbroj stupaca rešetke trebao bi biti dvanaest za jedan vodoravni blok. Više od toga, stupci se počinju slagati bez obzira na okvir za prikaz.
Dva stupca
Dobijte dva stupca počevši od stolnih računala i skalirajući na velika stolna računala .
Puna širina, jedan stupac
Klase mreže nisu potrebne za elemente pune širine.
Dva stupca s dva ugniježđena stupca
Prema dokumentaciji, gniježđenje je jednostavno - samo stavite red stupaca unutar postojećeg stupca. To vam daje dva stupca počevši od stolnih računala i skalirajući do velikih stolnih računala , s još dva (jednake širine) unutar većeg stupca.
Na veličinama mobilnih uređaja, tableta i niže, ovi će se stupci i njihovi ugniježđeni stupci slagati.
Mješovito: mobilni i desktop
Sustav mreže Bootstrap v4 ima pet razina klasa: xs (ekstra mali, ovaj infiks klase se ne koristi), sm (mali), md (srednji), lg (veliki) i xl (ekstra veliki). Možete koristiti gotovo bilo koju kombinaciju ovih klasa za stvaranje dinamičnijih i fleksibilnijih izgleda.
Svaki sloj klasa se povećava, što znači da ako planirate postaviti iste širine za md, lg i xl, trebate samo navesti md.
Mješovito: mobitel, tablet i stolno računalo
Oluci
S .gx-*
klasama, horizontalni oluci se mogu prilagoditi.
.col
s
.gx-4
olucima
.col
s
.gx-4
olucima
.col
s
.gx-4
olucima
.col
s
.gx-4
olucima
.col
s
.gx-4
olucima
.col
s
.gx-4
olucima
Koristite .gy-*
klase za kontrolu okomitih oluka.
.col
s
.gy-4
olucima
.col
s
.gy-4
olucima
.col
s
.gy-4
olucima
.col
s
.gy-4
olucima
.col
s
.gy-4
olucima
.col
s
.gy-4
olucima
S .g-*
klasama, oluci u oba smjera mogu se prilagoditi.
.col
s
.g-3
olucima
.col
s
.g-3
olucima
.col
s
.g-3
olucima
.col
s
.g-3
olucima
.col
s
.g-3
olucima
.col
s
.g-3
olucima
Kontejneri
Dodatne klase dodane u Bootstrap v4.4 dopuštaju spremnike koji su 100% široki do određene prijelomne točke. v5 dodaje novu xxl
prijelomnu točku.