4. RADIONICA - BOOTSTRAP

Navbar

Navbar ili navigacijska traka je druga stvar zbog koje se ljudi redovito odlučuju koristiti Bootstrap framework. Naime, Bootstrap ima već riješenu navigacijsku traku i to u više varijanti. Kako bi napravili navigacijsku traku koristeći Bootstrap, obavezno moramo koristiti "nav" tag (postoji i opcija korištenjem "div" tag-a ali uz dodatne modifikacije). U nastavku je objašnjeno kako izraditi jednu jednostavniju navigacijsku traku koja je i responzivna odnosno koja će se vidjeti drugačije na mobilnim uređajima.

1. korak - dodavanje "nav" tag-a sa klasom "navbar" i klasom navbar-default za predefinirarni standardni izgled:

<nav class="navbar navbar-default">

</nav>

Rezultat:

2. korak - dodavanje "container-fluid" ili "container" klase unutar navigacije kako bi održali sve elemente na okupu u jednom div-u:

<nav class="navbar navbar-default">
  <div class="container-fluid">
  
  </div>
</nav>

Rezultat:

3. korak - dodavanje novog div-a sa "navbar-header" klasom. Ovaj div nam je potreban za pravilno ponašanje navigacijske trake na mobilnim uređajima, a unutar njega postavljamo naziv našeg proizvoda i jednu tipku koja je vidljiva samo na mobilnim uređajima:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <!--Tipka vidljiva samo na mobilnim uređajima-->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#linkovi" aria-expanded="false">
         <span class="icon-bar"></span>    <!--Prva crtica unutar tipke-->
         <span class="icon-bar"></span>    <!--Druga crtica unutar tipke-->
         <span class="icon-bar"></span>    <!--Treća crtica unutar tipke-->
      </button>
      <!--Naziv proizvoda vidljiv cijelo vrijeme na istom mjestu-->
      <a class="navbar-brand" href="#" style="color:#01a1ff">Futura</a>
    </div>
  </div>
</nav>

Rezultat:

4. korak - dodavanje novog div-a sa listom linkova (desno poravnati) koji će se na većim ekranima poredati jedan pored drugog, a na manjim jedan ispod drugog:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <!--Tipka vidljiva samo na mobilnim uređajima-->
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#linkovi" aria-expanded="false">
         <span class="icon-bar"></span>    <!--Prva crtica unutar tipke-->
         <span class="icon-bar"></span>    <!--Druga crtica unutar tipke-->
         <span class="icon-bar"></span>    <!--Treća crtica unutar tipke-->
      </button>
      <!--Naziv proizvoda vidljiv cijelo vrijeme na istom mjestu-->
      <a class="navbar-brand" href="#" style="color:#01a1ff">Futura</a>
    </div>
    
    <!--div čije klase i id određuju ponašanje na mobilnim uređajima-->
    <div class="collapse navbar-collapse" id="linkovi">
      <!--Lista linkova poravnatih desno na većim ekranima-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">O nama</a></li>
        <li><a href="#">Galerija</a></li>
        <li><a href="#">Kontakt</a></li>
      </ul>
    </div>
  </div>
</nav>

Rezultat:

Zadatak 1

Otvoriti novi HTML dokument i napraviti:

• Osnovnu strukturu HTML-a sa naslovom stranice i UTF-8 enkodiranjem (Pomoć 1) (Pomoć 2)
• Dodati Bootstrap CSS, Bootsrap JS i jQuery (Pomoć)
• Dodati responzivnu Bootstrap navigacijsku traku
• Za naziv proizvoda upisati svoje prezime
• Navigacijska traka mora imati 4 linka (prva tri na proizvoljne stranice, a zadnji na ništa)

Slike

Bootsrap nudi mogućnost da bilo koja slika bude responzivna, odnosno da se smanjuje i povećava ovisno o rezoluciji ekrana. Sve što je potrebno jest dodati "img" tag-u klasu "img-responsive"

<img class="img-responsive" src="img/futura.jpg" />

Rezultat:

Uz to, ukoliko sliku želimo centrirati, Bootstrap nudi klasu "center-block" koja će to odraditi za nas:

<img class="img-responsive center-block" src="img/bootstrapLogo.png" />

Rezultat:

Forme

Svaka modernija stranica posjeduje rubriku "kontakt" u kojoj nalazimo kontakt forme. Bootstrap nudi mogućnost korištenja gotovih klasa koje olakšavaju dizajniranje formi. Za jednu jednostavnu kontakt formu (koja je u nastavku i objašnjena) su potrebna 4 elementa spakirana u jedan "form" tag.

1.korak - dodavanje "form" tag-a i 3 div-a s klasama "form-group" kako bi sve elemente i njihove nazive grupirali i lakše se snalazili kasnije:

<form>
  <div class="form-group">

  </div>

  <div class="form-group">

  </div>

  <div class="form-group">

  </div>
</form>

2.korak - dodavanje elementa za upis imena i prezimena, elementa za upis email adrese i elementa za upis neke poruke. Uz svaki element ide i prikladna labela koja zajedno s elementom čini jednu grupu:

<form>
  <!--Grupa za ime i prezime-->
  <div class="form-group">
    <label for="nameInput">Ime i prezime</label>
    <input type="text" class="form-control" id="nameInput" placeholder="npr. Ivan Horvat">
  </div>
  
  <!--Grupa za email-->
  <div class="form-group">
    <label for="emailInput">Email</label>
    <input type="email" class="form-control" id="emailInput" placeholder="npr. ivan@horvat.hr">
  </div>

  <!--Grupa za proizvoljni tekst-->
  <div class="form-group">
    <label for="textInput">Poruka</label>
    <textarea class="form-control" rows="3" id="textInput" placeholder="Napišite poruku..."></textarea>
  </div>
</form>

Rezultat:

3.korak - dodavanje tipke za slanje poruke na dno:

<form>
  <!--Grupa za ime i prezime-->
  <div class="form-group">
    <label for="nameInput">Ime i prezime</label>
    <input type="text" class="form-control" id="nameInput" placeholder="npr. Ivan Horvat">
  </div>
  
  <!--Grupa za email-->
  <div class="form-group">
    <label for="emailInput">Email</label>
    <input type="email" class="form-control" id="emailInput" placeholder="npr. ivan@horvat.hr">
  </div>

  <!--Grupa za proizvoljni tekst-->
  <div class="form-group">
    <label for="textInput">Poruka</label>
    <textarea class="form-control" rows="3" id="textInput" placeholder="Napišite poruku..."></textarea>
  </div>
  
  <!--Tipka za slanje gore upisanih podataka-->
  <button type="submit" class="btn btn-primary btn-right">Pošalji</button>
</form>

Rezultat:

Zadatak 2

U prethodni HTML nadodajte novi container koji će sadržavati:

• Glavni naslov (h1), centriran i zauzima 12 Bootstrap stupaca
• Jednu sliku koja je responzivna, centrirana i zauzima također 12 Bootstrap stupaca (koristiti Bootstrap klase)
• Jedan paragraf dugačkog teksta poravnat s obje strane - 12 stupaca ; (tekst možete preuzeti OVDJE)
• Još 3 responzivne i centrirane slike jedna do druge, od kojih svaka zauzima jednak broj Bootstrap stupaca (Pomoć)
• Kontakt formu sa 4 elementa + tipka za slanje. Elementi su Ime, Prezime, Email i Poruka (12 stupaca)

Zadatak

Napraviti responzivnu portfolio stranicu koja će imati:

• Responzivnu navigacijsku traku koja:
• je fiksirana na vrhu stranice (koristiti Bootstrap klasu za fiksiranje)
• sadrži vaše ime i prezime lijevo
• sadrži 3 linka (Početna, Portfolio i Kontakt) s desne strane
• klikom na linkove vodi na određene djelove stranice (koristiti ID umjesto URL-a unutar linka)
• Početnu pozadinsku sliku pune širine i minimalne visine od 600px
• koristiti eksterni zapis CSS-a za određivanje svojstva visine, širine i postavljanje pozadinske slike
• Po sredini slike staviti glavni naslov (ime i prezime) i kratki podnaslov (zanimanje)
• Slika, naslov i podnaslov se nalaze u zasebnom containeru pune širine koji ima ID isti kao i prvi link (Početna) u navigacijskoj traci
• Jedan paragraf u novom containeru (koji ima isti ID kao drugi link) u kojem ćete:
• navesti nešto o sebi (paragraf može sadržavati liste, linkove..)
• eksternim zapisom CSS-a promijeniti pozadinsku boju container-a, povećati slova paragrafa i dodati im neki font iz Sans-serif familije
• Tri slike poredane jedna pored druge koje:
• sadrže centrirani naslov i opis ispod (najlakše je koristiti Bootstrap Thumbnail klasu)
• Kontakt formu sa 4 elementa + tipka za slanje. Elementi su Ime, Prezime, Email i Poruka
• Footer element pune širine u kojem će se nalaziti centrirani link sa nazivom "futura.com.hr"
• Cijeli kod je potrebno iskomentirati unutar HTML i CSS dokumenta:
• unutar HTML-a i CSS-a neka prva linija bude komentar sa vašim imenom i prezimenom
• sve ključne djelove koda komentirajte prije (poviše) koda

Primjer slične stranice možete vidjeti klikom na sliku ispod. Sa desne strane je i objašnjenje kako je zamišljeno da elementi budu grupirani.