Primjeri Bootstrap mreže

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

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

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

Bootstrap 3 mrežni sustav ima četiri razine klasa: xs (telefoni), sm (tableti), md (stolna računala) i lg (veća stolna računala). 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 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: mobitel, tablet i stolno računalo

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

Očistite plovke na određenim prijelomnim točkama kako biste spriječili nespretno omatanje s neravnim sadržajem.

.col-xs-6 .col-sm-3
Promijenite veličinu okvira za prikaz ili ga pogledajte na svom telefonu za primjer.
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3
.col-xs-6 .col-sm-3

Offset, push i pull resetira

Ponovno postavite pomake, guranja i povlačenja na određenim prijelomnim točkama.

.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