Primjeri Bootstrap mreže

Osnovni rasporedi rešetki za upoznavanje s gradnjom unutar Bootstrap sustava rešetki.

U ovim primjerima .themed-grid-colklasa 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.

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

.col-md-4
.col-md-4
.col-md-4

Alternativa tri jednaka stupca

Korištenjem .row-cols-*klasa možete jednostavno stvoriti mrežu s jednakim stupcima.

.coldijete od .row-cols-md-3
.coldijete od .row-cols-md-3
.coldijete 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.

.col-md-3
.col-md-6
.col-md-3

Dva stupca

Dobijte dva stupca počevši od stolnih računala i skalirajući na velika stolna računala .

.col-md-8
.col-md-4

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.

.col-md-8
.col-md-6
.col-md-6
.col-md-4

Mješovito: mobilni i desktop

Sustav mreže Bootstrap v5 ima šest razina klasa: xs (extra small, ovaj infiks klase se ne koristi), sm (mali), md (srednji), lg (veliki), xl (x-veliki) i xxl (xx -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, xl i xxl, trebate navesti samo 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

Mješovito: mobitel, tablet i stolno računalo

.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

Oluci

S .gx-*klasama, horizontalni oluci se mogu prilagoditi.

.cols .gx-4olucima
.cols .gx-4olucima
.cols .gx-4olucima
.cols .gx-4olucima
.cols .gx-4olucima
.cols .gx-4olucima

Koristite .gy-*klase za kontrolu okomitih oluka.

.cols .gy-4olucima
.cols .gy-4olucima
.cols .gy-4olucima
.cols .gy-4olucima
.cols .gy-4olucima
.cols .gy-4olucima

S .g-*klasama, oluci u oba smjera mogu se prilagoditi.

.cols .g-3olucima
.cols .g-3olucima
.cols .g-3olucima
.cols .g-3olucima
.cols .g-3olucima
.cols .g-3olucima

Kontejneri

Dodatne klase dodane u Bootstrap v4.4 dopuštaju spremnike koji su 100% široki do određene prijelomne točke. v5 dodaje novu xxlprijelomnu točku.

.kontejner
.posuda-sm
.kontejner-md
.kontejner-lg
.kontejner-xl
.kontejner-xxl
.posuda-tekućina