Uvod

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 i ...

Predlog kako da radite:

OBJAŠNJENJA:

 

Redovi i kolone i kako da počnemo:

Pre svega, treba da odredimo jedan element koji će nam služiti kao omotač i u njega smeštamo sve ostale elemente. Ovom elementu dodajemo klasu container (ukoliko želimo omotač fiksirane širine) ili container-fluid (ukoliko želimo omotač 100% širine pogleda).

Stranicu delimo na redove. Jedan red je element sa klasom row. Red se deli na najviše 12 kolona i 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

Pomoću ovih klasa lako kontrolišemo prilagodivost stranice veličini ekrana. Za svaku veličinu ekrana možemo definisati koliko kolona treba da zauzima element tako što umesto zvezdica navodimo broj kolona. Još jednom da napomenemo - vodimo 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.

Margine

Postoje i posebne klase za kontrolu razmaka između elemenata, odnosno za kontrolu spoljašnjih margina. Ove klase ubrajaju se u kolone, a obeležavamo ih sa offset-*-*, gde se prva zvezdica zamenjuje veličinom uređaja, a druga brojem kolona. Kako se i ove klase ubrajaju u kolone, i njihov broj treba uključiti u ukupan broj kolona u jednom redu koji ne sme biti veći od 12. Slično kao za širinu elemenata, ako se navede veličina margine za jednu dimenziju uređaja ista dimenzija koristi se za veće koje nisu definisane, a za manje važi da su veličine 0.

Linkovi:

Neke opšte stvari:

---

U nastavku je dat primer korišćenja klase za rad sa slikama. U zavisnosti šta želite da postignete, dodajete klase za to. U ovom primeru se koristi rounded-circle - slika će imati zaobljene uglove i to u obliku kruga.

Primer :

<img src="img/slika.jpg" class="rounded-circle" alt="Circular Image">

Ako želite oblik elipse, koristite rounded-pill. Za ostale opcije, pogledajte na njihovom zvaničnom web sajtu ....

---

Neke opcije koje su nam od interesa:

U nastavku je ilustrovan primer - Kako da bojite tekst ili mu menjate izgled?

Neke od klasa za obojeni tekst su:

 .text-muted, 
 .text-primary, 
 .text-success, 
 .text-info, 
 .text-warning, 
 .text-danger

Neke od klasa za izgled teksta su:

  .text-lowercase, 
  .text-uppercase, 
  .text-capitalize

Primeri za ovo:

<p class="text-lowercase">Tekst ispisan malim slovima.</p>
<p class="text-uppercase">Tekst ispisan velikim slovima.</p>
<p class="text-capitalize">Svaka reč počinje velikim slovom.</p>

Ovo izgleda ovako:

Neke komponente koje su nam od interesa:

---

U nastavku je par primera:

Primeri ( rad sa okvirima - border):

Okviri oko bilo čega:

Border - dodaje border sa svih strana border-top - dodaje border na vrhu elementa border-right - dodaje border samo desnoj strani elementa border-bottom - dodaje border na dnu elementa border-left - dodaje border samo sa leve strane elementa

primeri za okvire:

  <div class="border">borderi oko celog bloka</div>
  <div class="border-top"> border samo gore</div>
  <div class="border-right">border samo desno</div>
  <div class="border-bottom">border samo dole</div>
  <div class="border-left"> border samo levo</div>

Klase sa kojima određujemo boju bordera su:

<div class="border border-primary"></div>
<div class="border border-secondary"></div>
<div class="border border-success"></div>
<div class="border border-danger"></div>
<div class="border border-warning"></div>
<div class="border border-info"></div>
<div class="border border-light"></div>
<div class="border border-dark"></div>
<div class="border border-white"></div>

Klase kojim određujemo zakrivljenost bordera kod uglova:

<div class="rounded"></div>
<div class="rounded-top"></div>
<div class="rounded-right"></div>
<div class="rounded-bottom"></div>
<div class=" rounded-left"></div>
<div class=" rounded-circle"></div>
<div class=" rounded-pill"></div>
<div class=" rounded-0"></div>

rounded-circle - napraviće krug od elementa

Širina i visina

Kako odrediti visinu i širinu?

Najbolje je pomoću procenata, odnosno koliko procenata će zauzeti od ukupne širine koja mu je dozvoljena.

Primeri zadavanja širine:

  <div class="w-25 p-3">Width 25%</div>
  <div class="w-50 p-3">Width 50%</div>
  <div class="w-75 p-3">Width 75%</div>
  <div class="w-100 p-3">Width 100%</div>
  <div class="w-auto p-3">Width auto</div>

Bootstrapovim klasama možemo zadati i visinu elementa. primeri:

  <div class="h-25 d-inline-block">Height 25%</div>

  <div class="h-50 d-inline-block">Height 50%</div>
  <div class="h-75 d-inline-block">Height 75%</div>
  <div class="h-100 d-inline-block">Height 100%</div>
  <div class="h-auto d-inline-block">Height auto</div>

---

Opciono - ako želite da dodate ikonice

U tom slučaju prvo treba da uključite ikonice, a za to imate dve opcije:

Zatim ih upotrebite na jedan od načina definisanih na sledećoj stranici: https://icons.getbootstrap.com/