Uvod
Twitterov Bootstrap je alat za brži i jednostavniji razvoj web aplikacija.
To je kolekcija CSS i HTML pravila i JavaScript ekstenzija.


Kako možete da ga koristite?

Odete na zvaničan sajt (https://getbootstrap.com) odaberete verziju sa kojom radite (ako je najnovija ne morate ništa da menjate smile i ...

  • Prvi način: postavite linkove ka bootstrap css i js fajlovima, 
    •  ili preuzmite šablon po kojem radite u kojem su ti linkovi već postavljeni, pa od toga počinjete u vašem html fajlu: ( Starter template za verziju 5.1, a ako biste najnoviji - pogledajte na sajtu .... )
  • Drugi način: preuzmite zip početni projekat i radite u njemu
Video br.1: Uvod u Bootstrap i zašto se koristi

Napomena: Ne mora da se uvek koristi najnovija verzija Bootstrap-a! U gornjem desnom delu Bootstrap-ove stranice (https://getbootstrap.com/) može da se bira verzija u kojoj će da se radi.

Za prvi put, radimo zadatak u kojem se koriste samo linkovi :

Koraci rada:

  • Otići na web sajt: https://getbootstrap.com/
  • U delu koji je označen sa Docs obratite pažnju na deo u sredini: Quick Start
  • Zatim u svom folderu kreirati novi folder (npr D:\Pera\Bootstrap1) u kojem će se raditi sledeći zadatak.
    • U folderu kreirati fajl index.html
    • U delu ispod naslova Quick Start nalaze se gotovi šabloni - prvi je osnovni šablon koji i onako možete dobiti sa ! i Enter u VS Code, ali je drugi onaj koji u sebi već ima postavljene linkove ka CSS i JS fajlovima koji će da se koriste
    • U gornjem desnom delu je oznaka da se taj kod kopira u Clipboard, a onda to ubacite u vaš html fajl.
    • Pogledajte kako to treba da izgleda:
      <!doctype html>
      <html lang="en">
        <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>Bootstrap demo</title>
          <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
        </head>
        <body>
          <h1>Hello, world!</h1>
          <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
        </body>
      </html>
    • Sačuvajte fajl i pogledajte kako izgleda (otvorite ga direktno u Browser-u, ili koristite Live Server u VS Code - Go Live)

Podsetnik: Da bi veb stranica bila prilagodljiva na svim rezolucijama i veličinama ekrana u <head> tagu se nalazi

<meta name="viewport" content="width=device-width, initial-scale=1">

Drugi deo: ubacivanje gotovih komponenti

Ako se koristi Bootstrap, sve što postavljamo radimo unutar div elementa sa klasom container, gde se sadržaj prikazuje na sredini sa određenim marginama levo i desno. Postoji i container-fluid kod kojeg se sadržaj prikazuje sa kraja na kraj ekrana, kao i još jedna verija koju zasad ne radimo.

Da bi bilo malo interesantnije, prvi primer koji koristimo je Accordian - pronaći ćete ga u delu sa nazivom Components (sa strane). ... Ima više verzija, a u cilju ove vežbe ćemo da koristimo drugu od ponuđenih verzija. Samo kopirajte ceo blok sa kodom (klik gore desno) i ubacite unutar div elementa, a posle naslova. Izmenite tekst na jednom od delova: na primer da se u srednji deo vidi teks ovde je samo neki tekst, a iza toga da je osnovnu lorem ipsum (u VS Code kucajte lorem i pritisnite Enter - uneti će se generisani tekst lorem ipsum)

Drugi primer je tabela: potražite U delu Content - > Tables i samo kopirajte kod za osnovnu tabelu. Tabelu postavite između naslova i Accordian-a, a radi preglednosti razdvojite ih sa po jednom horizontalnom linijom (<hr>).

Izmenite sadržaj tabele da se prikazuju neki drugi podaci. Na primer, Redni broj, Ime, Prezime i Grad: 

 <table class="table">
    <thead>
      <tr>
        <th scope="col">Redni broj</th>
        <th scope="col">Ime</th>
        <th scope="col">Prezime</th>
        <th scope="col">Grad</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>Marko</td>
        <td>Markovic</td>
        <td>Beograd</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Petar</td>
        <td>Petrovic</td>
        <td>Nis</td>
      </tr>
    </tbody>
  </table>

Promene izgleda se rade tako što se dodaju klase po potrebi. Na primer:

<table class="table table-dark"> - boja pozadine tabele

Ako želimo da dodamo na svaki drugi red promenjenu pozadinu(Striped rows)

<table class="table table-striped">

Dodavanje bordera na tabelu.

<table class="table table-bordered">

Možete dodavati i druge opcije - proučite u dokumentaciji ...'

Treći primer komponenti za dodavanje su dugmići - Button i Buton Group. Naći ćete ih u delu sa naslovom Components.

Potražite dugmiće koji vam se najviše sviđaju i samo taj kod kopirajte u vaš fajl - direktno ispod naslova a pre tabele.

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
 

Zatim izmeniti ponešto od izgleda:

Outline buttons:

<button type="button" class="btn btn-outline-primary">Primary</button>

Button size - Ovde imamo 3 veličine:

    .btn-lg - klasa za veće dugme
    .btn-sm - klasa za manje dugme
    .btn-block - dugme koje će zauzeti maksimalnu širinu 

<button type="button" class="btn btn-primary btn-lg">VELIKO dugme </button>
Zatim možemo po potrebi upotrebiti i grupisanje dugmića (Button group) - pogledajte dokumentaciju ...
Svakom od dugmića možemo da menjamo i boju i stil prikaza - po inspiraciji u grupi koja radi na času.

GRID sistem: Redovi i kolone i kako da počnemo:

Jedan od važnijih delova Twitter Bootstrap-a je grid sistem koji omogućava da se na brz i jednostavan način kreiraju responzivne web forme. Responzivnost je je svojstvo koje omogućava prilagođavanje elemenata stranice u zavisnosti od veličine ekrana na kojoj se prikazuje. Drugim rečima, stranica će, u zavisnosti od uređaja i ekrana, uvek izgledati kao da je rađena baš za njega.

U Bootstrap-u se stranica posmatra kao niz redova (css klasa .row), a svaki red se deli u 12 kolona. Pri tome je moguće da deo sadržaja zauzme više od jedne kolone.

Kako:

Pre svega, treba da odredimo jedan element (<div>) koji će nam služiti kao omotač i u njega smeštamo sve ostale elemente. Ovom elementu dodajemo klasu container ili container-fluid (ukoliko se želi prikaz sa 100% širine ekrana).

Stranicu delimo na redove. Jedan red je element sa klasom row. Red se deli na najviše 12 kolona. Treba voditi računa da ukupan broj kolona u jednom redu ne bude veći od 12. Ukoliko ne želimo da koristimo svih 12 kolona pojedinačno, možemo ih grupisati i time dobiti šire kolone. Ovaj sistem je prilagodljiv veličini ekrana, tako da ako u jednom redu nema mesta da se smesti svih 12 kolona, one će biti preuređene jedna ispod druge.

Klase koje možemo koristiti za obeležavanje kolona su:

  • col-* - označava veoma male ekrane, veličine do 576px
  • col-sm-* - označava male ekrane, od 576px naviše
  • col-md-* - označava ekrane srednje veličine, od 768px naviše
  • col-lg-* - označava velike ekrane, od 992px naviše
  • col-xl-* - označava veoma velike ekrane, od 1200px naviše

Za svaku veličinu ekrana možemo definisati koliko kolona treba da zauzima element tako što se umesto zvezdica navodi broj kolona.

Veoma je bitno da vodite računa da u jednom redu, koji se označava klasom row, ne bude više od 12 kolona !

Napomena: ako neki element zauzima, npr 3 kolone na veličini md, onda će on podrazumevano zauzimati isto toliko kolona i na svakoj većoj veličini (dakle, lg i xl) ukoliko za te veličine nije određen drugačiji broj. Za manje veličine važi da podrazumevano zauzimaju 12 kolona, ukoliko nijedna nije definisana.

Primer koji se može raditi na času je da se postave tri div elementa u koji se postavlja po jedan ili dva paragrafa i po potrebi menjati kako će to da se prikaže, a radi boljeg prikaza koristiti klase za promenu boje pozadine elemenata ili paragrafa.

pogledajte sledeći primer:

        <div class="row text-center">
            <div class="col-md-3 col-xs-5 bg-warning">
                <p >Pera Kojot</p>
            </div>
            <div class="col-md-5 col-xs-3 bg-danger">
                <p>Tom</p>
                <p class="bg-light">Ptica trkačica</p>
            </div>
            <div class="col-md-2 col-xs-4 bg-info">
                <p>Pera Detlić </p>
            </div>

        </div>

Ako biste sada krenuli da menjate veličinu prozora browser-a primetićete kako se menja raspored - na većem prikazu je prvi deo 3 kolone a na manjem zauzima 5 kolona .... sredji deo na većem prikazu zauzima 5 kolona a na manjem zauzima 3 kolone .... desni deo na većem prikazu zauzima 2 kolone a na manjem prikazu zauzima 4 kolone ... a ako se prozor smanji i dalje, ovi elementi će biti jedan ispod drugog!

Last modified: Tuesday, 16 December 2025, 9:19 AM