Bootstrap

Uvod

Bootstrapo-ov grid sistem sastoji se od 12 kolona (stupaca). Budući da se širina tih 12 stupaca automatski prilagođava širini ekrana uređaja onda ovaj grid sistem nazivamo responsivnim.
Postoje 4 širine stupaca:

1. col-xs-* za mobitele
2. col-sm-* za tablet uređaje
3. col-md-* za male desktop i laptope
4. col-lg-* za desktop računala

Donja tablica pokazuje područje djelovanja za svaku Bootstrap CSS klasu. Npr. col-sm djeluje za small, medium i large uređaje ako pri tome nisu napisani col-md i col-lg. Klasa col-xs djeluje samo za extra small uređaje tj. samo za mobitele.

Features Bootstrap 3 Grid System	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Max container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
Max column width	Auto	60px	78px	95px
Gutter width	15px on each side of a column (i.e. 30px)

gutter = razmak između dvije kolone (predefinirano 30px)

Osnovna pravila

• koristiti .container (fixed-width) ili .container-fluid (full-width) kako bi sadržaj bio centriran
• unutar .container staviti .row
• unutar .row staviti .col-xs- , .col-sm- , .col-md ili .col-lg

Na taj način dobiva se slijedeća html struktura:

Napomena: Kako bi simulirali različite uređaje tj. veličine ekrana u desktop browseru upotrijebite Viewport Resizer.

Primjer - Različiti primjeri sa col-xs, col-sm, col-md i col-lg.

1. col-xs vidi code » vidi stranicu
2. col-sm vidi code » vidi stranicu
3. col-md vidi code » vidi stranicu
4. col-lg vidi code » vidi stranicu

Iz gornjih primjera se može primjetiti da ukoliko nismo definirali klasu za manji ekran onda će se elementi nanizati jedan ispod drugog. Na primjer ako smo samo definirali col-lg onda će za sve ekrane koji imaju širinu manju od 1200px elementi biti automatski raspoređeni jedan ispod drugoga. Da bi se ovo izbjeglo potrebno je unutar class="" definirati niz klasa. Npr. ako definiramo class="col-md-6 col-lg-8" onda će pri širini ekrana manjoj od 1200px biti element širok 6kolona, dok će za >1200px biti element od 8kolona. Pogledati donji primjer:

Primjer - Pokazuje kombinaciju col-md-2 i col-lg-8.
vidi code » vidi stranicu

PRIMJER:

Primjer - Izraditi bootstrap grid prema gornjoj slici.
Primjetite upotrebu hidden-xs i hidden-sm.
vidi code » vidi stranicu

Broj stupaca u redu

Predefinirani broj stupaca u redu jest 12.
Ovo određuje @grid-columns varijabla u /bootstrap-3.1.1/less/variables.less fajlu.

Primjer - 12 stupaca u redu (4+8)
Primjetiti kako se za XS uređaje (<768px) stupci poslože jedan ispod drugog i da su 100% široki. To je zato jer nismo definirali stupce za XS ekrane.
vidi code » vidi stranicu

Primjer - 16 stupaca u redu (2+10+4)
Primjetiti kako se zadnji stupac (4) automatski prenosi u novi red jer je 2+10=12 pa se prvi red popunio.
vidi code » vidi stranicu

Primjer - 6 stupaca u redu (1+2+3)
Primjetiti da postoji u prvbom redu rupa od 12-(1+2+3) = 6 stupaca.
vidi code » vidi stranicu

Primjer - 18 stupaca u redu (2+6+10)
Primjetiti kako je zadnji stupac (10) prenesen u novi red jer ne stane u prvi red.
vidi code » vidi stranicu

Primjer: Izraditi slijedeći responsivni dizajn sa jednim redom.
xs:2+4, sm:2+3+5, lg:2+3+10
vidi code » vidi stranicu

Primjer: Izraditi slijedeći responsivni dizajn sa tri reda i dva stupca.
1.red - xs:3+9, sm:6+6
2.red - xs:5+7, sm:6+3
3.red - xs:8+4, sm:6+10

Primjetiti kako će se zadnji stupac col-sm-10 premijeti u 4 red jer ne stane u treći.
vidi code » vidi stranicu

Column Wrapping

Ukoliko je u redu kolona više od 12 onda se element prenosi u novi red. Ako je pak ukupan broj kolona manji ili jednak dvanaest onda element ostaje u redu.

Primjer koji pokazuje kada će se element prenijeti u isti red, a kada će ostati u istom redu.
vidi code » vidi stranicu

Clearfix

Clearfix je CSS klasa koja sadrži clear:both; što znači da sve što je iza class="clearfix" ide u novi red. Ovo posebno služi ukoliko stupci nisu iste visine kao u naredna dva primjera.

Primjer: class="clearfix visible-sm" --clearfix radi samo pri sm (< 768px)
vidi code » vidi stranicu

Primjer: class="clearfix" --clearfix radi pri svim veličinama ekrana
vidi code » vidi stranicu

.container vs .container-fluid

Unutar fajla /bootstrap-3.1.1/dist/css/bootstrap.css stoji: Što znači da će za uređaje čija je širina ekrana 992 do 1200px div.container biti širok 970px. Kod div.container-fluid će biti 100% širine ekrana.

Primjer sa class="container" i sa class="container-fluid"
vidi code » vidi stranicu

Offset

Direktiva col-md-offset-N pomiče kolonu za N stupaca udesno. Važno je napomenuti da se i ostale kolone koje su desno od pomaknute kolone, pomiču za N stupaca udesno. Kolone koje su lijevo od pomaknute kolone ostaju na svome mjestu.

Primjer:
vidi code » vidi stranicu

Nesting

Unutar jedne kolone (polja) može se ugnjezditi jedno ili više drugih kolona.
Unutar parent elementa se automatski uspostavlja grid sa 12 kolona. To znači da ugnježđeni element ostaje u istom redu ako je zbroj kolona manji ili jednak 12.

Primjer:
vidi code » vidi stranicu

Push i Pull

col-sm-push-N = pomiče kolonu za N kolona udesno od normalnog položaja
col-sm-pull-N = pomiče kolonu za N kolona ulijevo od normalnog položaja Pri tome je važno napomenuti da sve ostale kolone ostaju na svojim mjestima.

Primjer pokazuje na koji način dva elementa mogu zamijeniti mjesta.
vidi code » vidi stranicu

Primjer: Push za dve kolone. Primjetiti da se pushem pogurava samo kolona na koju se push odnosi, tj. da sve druge kolone ostaju na svojim mjestima.
vidi code » vidi stranicu

Primjer koji pokazuje da push ne utiče na prelazak elementa u novi red, bez obzira što je ukupan zbroj kolona >12.
vidi code » vidi stranicu

Less Mixins i Variable

Osim predefiniranog Bootstrap Grida pomoću Less varijabli i mixina možemo definirati i naš vlastiti layout. Osnovne varijable su: