Twitter Bootstrap je besplatan, radni okvir (engl. front-end framework), otvorenog koda, dizajniran za bržu i lakšu izradu web-stranica. Bootstrap koristi globalne CSS postavke i osnovne HTML elemente, stilizirane i poboljšane proširenim klasama te naprednim mrežastim sustavom (engl. grid system), koji se skalira s obzirom na platformu na kojoj se usluga pokreće [1]. Na tome se bazira načelo oblikovanja stranica prilagodljivih različitim platformama (RWD, Responsive Web Design).
Tablica 3.1. prikazuje mrežni sustav Bootstrap i način na koji se on mijenja ovisno o širini ekrana uređaja na kojemu se usluga pokreće.
Tablica 3.1. Mrežni sustav Bootstrap-a Jako mali uređaji Mobiteli (<768px) Mali uređaji Tableti (≥768px) Srednji uređaji Desktop (≥992px) Veliki uređaji Desktop (≥1200px) Ponašanje mrežnog sustava Cijelo vrijeme horizontalno Sužava se do prijelomne točke, horizontalno nakon prijelomne točke Prefiks .col-xs- .col-sm- .col-md- .col-lgBroj stupaca 12 Širina stupca Auto 60px 78px 95px Mrežni sustav je podijeljen na retke od kojih svaki ima 12 stupaca kroz koje se, odgovarajućim prefiksom (col-xs-, col-sm-, col-md-, col-lg-), može pozicionirati [2]. Colxs- je prefiks za pametne telefone, col-sm- za tablete, a ostala dva prefiksa sa desktop platforme različite širine. Primjer koda:
Kod rezultira različitim ponašanjem mrežnog sustava ovisno o platformi na kojoj je pokrenut. Treba napomenuti da ukoliko nije naveden prefiks većeg tipa od trenutnog (u ovom primjeru col-md-), skaliranje elementa na većem uređaju (col-lg-) jednako je skaliranju elementa na kojega se aplicira navedeni manji prefiks ( u ovom primjeru colmd-). 8 Slika 3.1. prikazuje raspodjelu elemenata po stupcima na „desktop“ platformi. Svi elementi su raspodijeljeni u jedan redak.
Slika 3.1. Mrežni sustav danog koda na „desktop“ platformi Slika 3.2. prikazuje raspodjelu elemenata po stupcima na uređaju male širine ekrana (xs and sm devices).
Slika 3.2. Mrežni sustav danog koda na -xs i -sm uređajima Bootstrap uz osnovne HTML elemente, sadrži dodatna proširenja kojima osigurava dinamičan prikaz elemenata na web-stranicama. Također sadrži JavaScript dodatke kojima omogućava korisniku upotrebu dodatnih elemenata kao što su „dialog-boxes“, „modal“, „tooltips“, „dropdowns“ i drugi. Bootstrap su razvili Mark Otto i Jacob Thornton iz Twitter tima.
A kad smo već na temi Bootstrapa, postavimo si pitanje: Trebamo li koristiti Bootstrap u svim našim projektima?Naravno da na ovo pitanje bi sami sebi morali dati odgovor. Kada pogledamo dobre i loše strane korištenja bilo kojeg frameworka – odgovor je uvijek dvosmislen – ni da, ni ne.
Bootstrap je dobar jer:
- se može lako i brzo prilagođavati za različite potrebe
- ga možemo reducirati na module koji su nam potrebni
- ubrzava izradu weba
- nije kompliciran za početnike
- ga možemo prilagoditi (putem weba, ili koristeći less/sass)
No, ako pogledamo s druge strane i nije toliko dobar jer:
- nije idealno i perfektno rješenje za sve projekte
- ne prati najbolje i optimalne prakse prilikom izrade koda
- ne može se lako ubaciti na postojeće projekte
- u startu ima više od 100kb koda u sebi
- ne funkcionira ako dizajn koji imate je radikalan, inovativan ili van svih standarda