Rekapitulacija

Uvodne napomene

 Zadatak se sastoji od izrade nekoliko stranica primenom Bootstrap radnog

okvira.
 U fazi pripremi možete unapred kreirati prazne stranice sa linkovima ka
bootstrap biblioteci lokalnoj ili spoljašnjoj.
 Svaka stranica ima više delova i svi pojmovi od značaja su naglašeni u tekstu.
 Ono što nije naglašeno treba odabrati na način da bude maksimalno u skladu
sa Bootstrap prikazom, odnosno koristiti BS klase gde one postoje.
1. Deo. Strana grid.html
 Kreirati mrežu koja će biti smeštena u kontejer širine 100% širine ekrana do 992px (large), a za šire ima
prelomne tačke, tako da:
1. Prvi red ima tri ćelije (kolone) jednake širine za sve širine ekrana, a obojeni su sa tri konteksne boje koje
nudi bootstrap, kao na slici:

2. Drugi red treba da ima dve kolone proporcionalnih širina: 1:5, za ekrane srednje širine i šire.
Druga ćelija ovog reda, treba da ima dve ćelije iste širine u kojima će pisati dve vrednosti sa dve
decimale poravnate u desno i to centrirano po vertikali, kao na slici:
3.

4. Treći red ima tri ćelije u razmeri 3:4.5:4.5. Sadržaj u drugoj i trećoj ćeliji treba da bude centriran po
vertikali. U prvoj i drugoj poravnat u levo, a u trećoj centriran i po horizontalnoj osi. Ceo red treba da
bude uokviren, a treba dodati separatore između ćelija kao na slici:

5. Četvrti red treba da ima jednu ćeliju sirne 50% postavljenu na sredinu ekrana po širini.
Rešenje
 Kreirati mrežu koja će biti smeštena u kontejer širine 100% širine ekrana do 992px
(large), a za šire ima prelomne tačke.

 <div class="container-lg">

 Prvi red ima tri ćelije (kolone) jednake širine za sve širine ekrana, a obojeni su sa
tri konteksne boje koje nudi bootstrap.
 <div class="row">
 <div class="col bg-success">Lorem
 <div class="col bg-warning">Lorem
 <div class="col bg-info">Lorem
 </div>
Drugi red treba da ima dve kolone proporcionalnih sirina 1:5, za ekrane srednje sirine i šire
. Imajući u vidu da je 12 uk. širina rešenje je:

Druga ćelija treba da ima (pod)red sa dve ćelije jednake sirine u kojima će pisati na primer
425.154,15 odnosno 123.147,00 centrirano po vertikali i poravnato u desno..
Treći red ima tri ćelije u razmeri 3:4.5:4.5. Sadržaj u drugoj i trećoj ćeliji treba da bude
centriran po vertikali. U prvoj i drugoj poravnat u levo, a u trećoj centriran i po horizontalnoj
osi. Ceo red treba da bude uokviren, a treba dodati separatore između ćelija kao na slici:
 <div class="row border border-danger">
 <div class="col-3">
 Kupac <br>
 Ime i prezime: <br>
 *Podatak iz baze...
 </div>
 <div class="col align-self-center border-start ">
 Jovan Jovanović
 </div>
 <div class="col border-start align-self-center text-center">
 <button type="button" class="btn-outline-primary">Detalji</button>
 <button type="button" class="btn-primary">Izmeni</button>
 <button type="button" class="btn-danger">Obriši</button>
 </div>
 </div>
Četvrti red treba da ima jednu ćeliju sirne 50% postavljenu na sredinu ekrana po
širini.
 <div class="row">
 <div class="col-6 offset-3 bg-danger">sredina</div>
 </div >
Strana utils.html
 Napraviti sekciju za istaknuti tekst koja će imati sledeće karakteristike:
1. Prostire se duž cele širine stranice. Tekst je formatiran pomoću h2 elementa.
Unutrašnost i tekst obojiti kao na slici. Ivice sa gornje strane zaobliti. Odvojiti ovaj
deo od ostatka sa marginom uvećanom za 1.5 puta. Takođe, uvećati prostor između
ivice i teksta za 1.5 puta.

2. U novom redu kreirati tri kartice širine 1/3 ekrana, primenom klase card. Kartica
prikazuje sliku u prilogu. Kartica ima: zaglavlje sa tekstom, podnožje sa linkom do
slike i telo koje sadrži naslov "Brod ?" i sliku.
 U narednom redu kreirati dva dgumeta I jednu kontolu za prikaz napretka,
kao na slici:

 Klikom na dugme “Start anlize” pokreće se tajmer koji broji na svakih 200ms.
Klikom na dugme „Stop anlize“ zaustavlja se rad tajmera.
 Na svaku promenu vrednosti brojča, koja se menja u jednom intervalu, menja
se vrednost na progres kontroli. Tekst se takođe menja.

 Kada vrednost brojača dostigne dve granične vrednosti treba prikazati dva
alerta. Drugi, treba da bude sa dodatnim dugmetom za nestajanje.
Rešenje
 Napraviti sekciju za istaknuti tekst koja će imati sledeće karakteristike:
1. Prostire se duž cele širine stranice. Tekst je formatiran pomoću h2 elementa. Unutrašnost i tekst
obojiti kao na slici. Ivice sa gornje strane zaobliti. Odvojiti ovaj deo od ostatka sa marginom
uvećanom za 1.5 puta. Takođe, uvećati prostor između ivice i teksta za 1.5 puta.
 <div class="container-fluid">
 <div class="bg-success text-light border border-danger p-4 mb-4 rounded-top" >
 <h2>Lorem, ipsum<h2>
 </div>
 </div>
1. U novom redu kreirati tri kartice širine 1/3 ekrana, primenom klase card. Kartica
prikazuje sliku u prilogu. Kartica ima: zaglavlje sa tekstom, podnožje sa linkom do slike i telo koje sadrži
naslov "Brod ?" i sliku.

 <div class="container-fluid">
 <div class="row align-items-center">
 <div class="col-4">
 <div class="card bg-warning">
 <div class="card-header">Preporuka</div>
 <div class="card-body">
 <h4 class="card-title">Jahta 1</h4>
 <img src="./galerija/imgs/slika11.gif" alt="Card image" class="rounded-circle">
 </div>
 <div class="card-footer">
 <a href="./galerija/imgs/slika11.gif" class="card-link">Uvećano</a>
 </div>
 </div>
 </div>

 <div class="col-4">
 <div class="card bg-secondary">
 <div class="card-header">Za sportiste</div>
 <div class="card-body">
 <h4 class="card-title">Jedrenjak</h4>
 <img src="./galerija/imgs/slika2.gif" alt="Card image" class="rounded-circle">
 </div>
 <div class="card-footer">
 <a href="./galerija/imgs/slika2.gif" class="card-link">Uvećano</a>
 </div>
 </div>
 </div>
 <div class="col-4">
 <div class="card bg-light">
 <div class="card-header">Kategorija: Akcije</div>
 <div class="card-body">
 <h3 class="card-title">Brod 3 <span class="badge bg-warning badge-
pill">Akcija</span> </h3>
 <img src="./galerija/imgs/slika5.gif" alt="Card image" class="rounded-circle">
 </div>
 <div class="card-footer">
 <a href="./galerija/imgs/slika5.gif" class="card-link">Uvećano</a>
 </div>
 </div>
 </div>
 </div>
 </div>
U narednom redu kreirati dva dgumeta i jednu kontolu za prikaz napretka, kao na slici:

<div class="row align-items-center">

<div class="col">
<button type="btn" onclick="intVar = setInterval(fjaTimer, 200);">Start anlize</button>
</div>
<div class="col">
<button type="btn" onclick="clearInterval(intVar);">Stop anlize</button>
</div>
<div class="col-9">
<div class="row align-items-center">
<div class="col">
<div class="progress">
<div id="pb" class="progress-bar bg-info progress-bar-animated" style="width:0%">
0% već prodatih zaliha...
</div>
</div>
</div>
</div>
</div>
</div>
 Na svaku promenu vrednosti brojča, koja se menja u jednom intervalu, menja se vrednost na progres
kontroli. Tekst se takođe menja.

 var brojac = 1;
 function fjaTimer(){
 brojac++;
 var elpb = document.getElementById("pb");
 elpb.style="width:"+brojac+"%";
 elpb.innerText = brojac+"% već prodatih zaliha";
 }
 Kada vrednost brojača dostigne dve granične vrednosti treba prikazati dva alerta. Drugi, treba
da bude sa dodatnim dugmetom za nestajanje.

<div id="alert1" class="alert alert-success d-none">

<strong>Uspešno!</strong> Uspešno snimljeno! <a class="alert-link" href="#">Detaljnije</a>
</div>
<div id="alert2" class="alert alert-danger alert-dismissible fade">
<button type="button" class="btn-close" data-bs-dismiss="alert"></button>
<strong>Pažnja!</strong> Nekompletni podaci.
</div>
<script>
var brojac = 1;
function fjaTimer(){
brojac++;
var elpb = document.getElementById("pb");
var ela1 = document.getElementById("alert1");
var ela2 = document.getElementById("alert2");
elpb.style="width:"+brojac+"%";
elpb.innerText = brojac+"% već prodatih zaliha";

if(brojac > 5) ela1.classList.remove('d-none');

if(brojac > 10) ela2.classList.add("show");

}
</script>
 Stranica navbar.html

 Postaviti meni bar tj. navbar kontrolu sledećih karakteristika:

1. Prelomna tačka za prikaz sažimajućeg menija je širina srednjih ekrana (768px).
2. Pozadinska boja boja treba da bude tamna, a slova svetla.
3. Logo je sa leve strane, a meni dugme (sendwich bar) sa desne strane.
4. Stavke u glavnom meniju su: Vesti, Događaji, Opcije, Kontakt
5. Aktivan tj. jače osvetljen link su Vesti, a onemogućen Događaji
6. Podopcije stavke Opcije su: Tema, Fontovi, Parametri. Iznad podopcije Parametri ubaciti liniju razdvajanja za meni.
7. U meni bar dodati linijsku formu koja sadrži: polje za pretragu (Text box) i dugme kojim se startuje pretraga.
8. Dodati razmak linijske forme od prethodnih stavki menija kada je meni vidljiv u horihontalnom prikazu, primenom
maksimalne margine.
9. Dugme ponistavanja ima boju upozorenja (warning), polje za unos teksta pretrage sadrži tekst „pretraga“‚ a dugme
za slanje podatake pretrage boju uspesnosti (success)
 Rešenje

1. Prelomna tačka za prikaz sažimajućeg menija je širina srednjih ekrana (768px).

2. Pozadinska boja boja treba da bude tamna, a slova svetla.
 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
bg-*** određuje pozadinsku boju, a klas .navbar-dark – za tamne pozadine

1. Logo je sa leve strane, a meni dugme (sendwich bar) sa desne strane.

 <nav class="navbar navbar-expand-md bg-dark navbar-dark">
 <a class="navbar-brand" href="#"> <img src="./logo/bs.png" alt="" width="30" height="30"> </a>
To znači da se u nav sekciji navodi link do brenda tj. logoa, a zatim sledi dugme i sažimajući odeljak za meni.
1. Stavke u glavnom meniju su: Vesti, Događaji, Opcije, Kontakt
 Najpre dodati dugme za sažeti meni. Klikom na dugme vrsi se isključenje/uključenje (eng. toggle) prikaza
odeljka sa stavkama menija.
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-target="#glavniMeni">
 <span class="navbar-toggler-icon"></span>
 </button>

 Dodavanjem data-bs-toggle="collapse" data-bs-target="#glavniMeni" postiže se automatizovano

skrivanje i prikazivanje određenog sadržaja.
 Zatim sledi dodavanje odeljka koji sadrži stavke menija.
 <div class="collapse navbar-collapse" id="glavniMeni">
 <ul class="navbar-nav">
 <li class="nav-item">
 Svaka od stavki ima sledeći osnovni oblik:
 <li class="nav-item">
 <a class="nav-link" href="#">Stavka...</a>
 </li>
 Aktivan tj. jače osvetljen link su Vesti, a onemogućen Opcije
 <li class="nav-item active">
 <a class="nav-link " href="#">Vesti</a>
 </li>
 <li class="nav-item">
 <a class="nav-link disabled" href="#">Događaji</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Opcije</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Kontakt</a>
 </li>
1. Podopcije stavke Opcije su: Tema, Fontovi, Parametri. Iznad podopcije Parametri ubaciti lin
iju razdvajanj za meni.
 Stavku sa prethodnog slajda Opcije treba zameniti sa padajućom listom:
 <li class="nav-item dropdown">
 <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Opcije</a>
 <div class="dropdown-menu">
 <a class="dropdown-item" href="#">Tema</a>
 <a class="dropdown-item" href="#">Fontovi</a>
 <div class="dropdown-divider"></div>
 <a class="dropdown-item" href="#">Parametri</a>
 </div>
 </li>
 U meni bar dodati linijsku formu koja sadrži: dugme sa oznakom ponistavanja
(x), polje za pretragu (Text box) i dugme kojim se startuje pretraga.
 <form class="form-inline" action="/nekaFja.asp">
 <button class="btn btn-warning" type="submit"> &times;</button>
 <input class="form-control" type="text"
 <button class="btn btn-success" type="submit">Pretraga</button>
 </form>
 Dodati razmak linijske forme od prethodnih stavki menija kada je meni vidljiv u
horihontalnom prikazu, primenom maksimalne margine.
 <form class="form-inline ml-md-5"
 Dugme ponistavanja ima boju upozorenja (warning), polje za unos teksta pretrage sadrži
tekst „pretraga“‚ a dugme za slanje podatake pretrage boju uspesnosti (success)
 <button class="btn btn-warning"
 <input placeholder="za pretragu"
 <button class="btn btn-success"
Btns.html

 Napisati dva grupisana dugmeta. Prvo dugme je popover dugme, a drugo

otvara modalnu formu.
<div class="container">
<div class="btn-group">
<button class="btn btn-warning" title="Napomena" data-bs-toggle="popover" data-bs-
placement="bottom" data-bs-content="Zatvaranjem ove stranice, podaci će biti izgubljeni.">?</button>
<button class="btn btn-danger" type="button" data-bs-target="#modalFrm1" data-bs-
toggle="modal">Close dialog</button>
</div>
</div>

<div class="modal fade" id="modalFrm1">

<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Zatvaranje forme!</h4>
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
<p>Podaci u memoriji će biti izgubljeni ako se forma zatvori.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>