22/23.3 Primenjene informacione tehnologije 3

(u vreme pisanja ovog teksta to je verzija 5.3: https://getbootstrap.com/docs/5.3/getting-started/download/ - preuzeti "Compiled CSS and JS" - spakovano u arhivu koju raspakujete u svoj folder na računaru)

Promenite naziv foldera u BootstrapZadatak i otvorite ga pomoću VS Code

Kreirati zadatak.html, i raditi u njemu :

1. unutar head-a dodati link ka css/bootstrap.css fajlu (nalazi se unutar css foldera)
   
2. Title: Bootstrap zadatak
3. unutar body dela html fajla se sve radi !
   1.  sve se radi unutar div elementa klase container! - da bi koristili Bootstrap kako treba
   2. naslov: Bootstrap zadatak
   3. posle toga treba postaviti horizontalnu liniju (<hr>)
   4. postaviti jednu tabelu, koja treba da ima i thead i tbody delove
      
   5.  unutar thead dela se nalazi samo jedan red u kojem su th tagovi
   6. unutar tbody dela su svi redovi sa podacima
      
   7. 
      
      1. pogledajte na Bootstrapovom sajtu kako to oni rade
      2. isprobati više klasa koje se koriste za izgled tabele
         
      3. ali prvo mora da se navede klasa table, a nakon toga sve ostalo ...
      4. ...
         
4. Nakon rada sa tabelom postaviti jednu horizontalnu liniju nakon koje se postavljaju slike
   1. koriste se tri proizvoljne slike koje se smeštaju u folder slike
   2. prvo postaviti jednu sliku u običan img tag - da se vidi šta će se dobiti ako se ne koristi nikakav stil
      1. pogledajte na Bootstrapovom sajtu kako oni rade sa slikama
         
      2. nakon toga postaviti jednu sliku koja koristi stil iz Bootstrap-a
         
   3. treba postaviti tri slike  - uočite kako izgledaju ako se prozor smanjuje do veličine ekrana mobilnog telefona?
5. Da bi se dodali stilovi za prikaz koji su malo drugačiji:
   
   1. unutar css foldera kreirati svoj css fajl: stil.css.
      
   2. U njemu postaviti samo jedan stil : da je za img elemente atribut width: 30%;
      
   3. Povezati taj fajl linkom u head delu html fajla.
      
   4. Sada bi trebalo da su slike jedna pored druge i da zauzimaju po 30% ekrana - koliki god da je ekran.
      
6. Ispod tih slika postaviti horizontalnu liniju.
   
7. Na kraju upotrebiti Carousel sa Bootstrapovog sajta (da se slike pomeraju).
   
   1. Upotrebiti iste slike kao u prethodnom delu
   2. Da li se slike pomeraju?
      1. odgovor: NE, jer nije dodat JavaScript!
      
      
8. Da bi sve akcije radile, na kraju, pre zatvaranja body taga, treba dodati skriptu za koju se u src deo upisuje Bootstrapov gotov JavaScript ("js/bootstrap.js" - pazite: svi bootstrapovi javaScript fajlovi se nalaze u folderu js!)