Twitter Bootstrap – najpoznatiji framework za front- end developement

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

5

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

Izvor