Bootstrap Tutorijal – Grid Sistem


Bootstrap Tutorijal – Grid Sistem

Bootstrap je front-end framework, koji se u suštini sastoji od nekoliko CSS i JavaScript fajlova koji mogu pomoći da brže napravite web sajtove, namerno donoseći neke osnovne odluke za vas i uključujuči unapred napravljene vidžete i komponente.

Pošto je u potpunosti izgrađen od CSS-a i JavaScript-a, Bootstrap je potpuno prilagodljiv i možete ga koristiti kao dobru polaznu tačku.

Trenutno aktuelna verzija Bootstrap 3 ima mnogo upakovanih opcija u sebi, ali vi uvek možete odabrati samo one koje su vam potrebne za vaš projekat i preuzeti ih. Na Bootstrap sajtu postoji opcija „Customize“ koja omogućava da selektujete elemente koje ćete koristiti.

Bootstrap 3 je predstavio novi flat dizajn koji je u trendu, ali on ima takođe i dve važne funkcionalne prednosti. Prvo, pojednostavljući neke od estetskih detalja olakšava prilagođavanje za sopstvene potrebe, a drugo, dramatično povećava brzinu odgovora, što u osnovi znači koliko dugo je potrebno browser-u da preuzme sve elemente na web stranici.

4 Grid Sistem?

Pa i ne baš. Bootstrap 3 u stvarnosti ima jedan grid sistem sa 4 nivoa „responsivnosti“. Na ovom linku možete pogledati kompletnu grid sistem dokumentaciju, a mi ćemo u nastavku dati uopšteno objašnjenje.

grid-system-ilustracija

Na ilustraciji iznad možete videti ukupno 12 boksova sadržaja na svim uređajima, ali njihovo pozicioniranje zavisi od veličine ekrana uređaja.

Na mobilnom uređaju raspored se učitava kao jedna kolona sa 12 redova smeštenih jedan ispod drugog,  tablet će prikazati dve kolone sa 6 redova, slično tome ekran srednje veličine prikazaće 3 kolone i 4 reda i na kraju uređaji velikih ekrana učitaće raspored u 4 kolone i tri reda.

Kako bi to izgledalo na konkretnom primeru uređaja srednje veličine kao što je laptop ili standardni desktop (3×4 grid raspored) pogledajte u primeru ispod.

<div class="container">
   <div class="row">
      <div class="col-md-4"><p>Box 1</p></div>
      <div class="col-md-4"><p>Box 2</p></div>
      <div class="col-md-4"><p>Box 3</p></div>
      <div class="col-md-4"><p>Box 4</p></div>
      <div class="col-md-4"><p>Box 5</p></div>
      <div class="col-md-4"><p>Box 6</p></div>
      <div class="col-md-4"><p>Box 7</p></div>
      <div class="col-md-4"><p>Box 8</p></div>
      <div class="col-md-4"><p>Box 9</p></div>
      <div class="col-md-4"><p>Box 10</p></div>
      <div class="col-md-4"><p>Box 11</p></div>
      <div class="col-md-4"><p>Box 12</p></div>
   </div>
</div>

Rezultat ovoga koda možete videti na sledećem linku. Ukoliko želite da vidite rezultat bez koda, na navedenom linku idite na Share i iskopirajte link iz polja Full Screen Result.

Zaključak

Suština Bootstrap-a je u pozivanju već unapred definisanih klasa u vašem kodu. Predhodno naravno morate preuzeti Bootstrap CSS i java script fajlove i pozvati ih u svome templejtu.

Može biti malo teže u početku da pozicionirate sve elemente, ali kada jednom naučite osnovni princip pozivanja klasa sve će ići mnogo lakše.

Ukoliko želite da naučite Bootstrap prvi i najvažniji korak je razumevanje grid sistema, a to ćete najbolje postići ako odete na zvanični Bootstrap sajt i proučite dokumentaciju. Nakon toga savetujemo da preuzmete Bootstrap i pokušate sami da napravite neke izmene.

Jovan Ivezic

E-business and internet marketing specialist.

Latest posts by Jovan Ivezic (see all)

facebook
twitter
google
pinterest