Primjeri mreže za pokretanje

Osnovni rasporedi mreže koji će vas upoznati sa građenjem unutar Bootstrap grid sistema.

Tri jednake kolone

Nabavite tri kolone jednake širine počevši od desktopa i skalirajući do velikih desktopa . Na mobilnim uređajima, tabletima i ispod, kolone će se automatski slagati.

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

Tri nejednake kolone

Nabavite tri kolone počevši od desktopa i skalirajte do velikih desktopa različitih širina. Zapamtite, broj stupaca mreže treba da iznosi do dvanaest za jedan horizontalni blok. Više od toga, kolone se počinju slagati bez obzira na okvir prikaza.

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

Dvije kolone

Nabavite dvije kolone počevši od desktopa i skalirajte do velikih desktopa .

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

Puna širina, jedna kolona

Za elemente pune širine nisu potrebne mrežne klase.

Dvije kolone sa dvije ugniježđene kolone

Prema dokumentaciji, ugniježđenje je jednostavno – samo stavite red kolona unutar postojeće kolone. Ovo vam daje dvije kolone počevši od desktopa i skaliraju do velikih desktopa , s još dvije (jednake širine) unutar veće kolone.

Na veličinama mobilnih uređaja, tableta i manje, ove kolone i njihove ugniježđene kolone će se slagati.

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

Mješovito: mobilni i desktop

Mrežni sistem Bootstrap 3 ima četiri nivoa klasa: xs (telefoni), sm (tableti), md (desktopovi) i lg (veći desktopi). Možete koristiti gotovo bilo koju kombinaciju ovih klasa da kreirate dinamičnije i fleksibilnije rasporede.

Svaki nivo klasa se povećava, što znači da ako planirate postaviti iste širine za xs i sm, trebate samo navesti xs.

.col-xs-12 .col-md-8
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6 .col-md-4
.col-xs-6
.col-xs-6

Mješovito: mobilni, tablet i desktop

.col-xs-12 .col-sm-6 .col-lg-8
.col-xs-6 .col-lg-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4
.col-xs-6 .col-sm-4

Čišćenje kolone

Očistite plutajuće na određenim tačkama prekida kako biste spriječili nezgodno umotavanje s neujednačenim sadržajem.

.col-xs-6 .col-sm-3
Promenite veličinu okvira za prikaz ili ga pogledajte na telefonu za primer.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push i pull resetuje

Resetirajte pomake, guranja i povlačenja na određenim tačkama prekida.

.col-sm-5 .col-md-6
.col-sm-5 .col-sm-offset-2 .col-md-6 .col-md-offset-0
.col-sm-6 .col-md-5 .col-lg-6
.col-sm-6 .col-md-5 .col-md-offset-2 .col-lg-6 .col-lg-offset-0