Anda di halaman 1dari 29

Osnove CSS Klase Zadatak

Bootstrap

Dragan Ivanovi¢
dragan.ivanovic@uns.ac.rs

2016.

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 1 / 29


Osnove CSS Klase Zadatak

Osnovni pojmovi

Intuitivan i mo¢an front-end framework za brºi i lak²i razvoj


web aplikacija
Razvijen od strane Twittera
Baziran na jQuery biblioteci, ali ne zahteva poznavanje
JavaScript jezika
Poseduje kolekciju HTML i CSS ²ablona za dizajn komponenti
interfejsa

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 2 / 29


Osnove CSS Klase Zadatak

Prednosti

Identi£an prikaz na svim modernim browser-ima


Responsive - sajt pravljen pomo¢u Bootstrapa se automatski
prilagožava urežaju na kojem se prikazuje
Mobile rst - Bootstrap kod inicijalno cilja na manje ekrane
(mobilne urežaje) i onda prilagožava komponente za ve¢e
ekrane
Open source
Dobro dokumentovan

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 3 / 29


Osnove CSS Klase Zadatak

Nedostaci

Bootsrap ne daje web aplikaciji originalan izgled - ve¢ina


aplikacija koje koriste Bootstrap vizuelno podse¢aju jedna na
drugu
U£itava se svaki put prilikom u£itavanja stranice, ²to zna£i da
se web stranica u£itava sporije
Traºi odgovaraju¢u verziju jQuery biblioteke, tako da upgrade
sajta ne moºe da se izvede bez dodatnih intervencija
Moºe da uti£e na rad pojedinih jQuery biblioteka, tako da
integracija u kompleksnije web aplikacije nije toliko jednostavna

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 4 / 29


Osnove CSS Klase Zadatak

Instalacija

Potrebno je sa sluºbene stranice preuzeti kompajliranu verziju


Uklju£iti bootstrap[.min].css datoteku u na²e HTML stranice
Uklju£iti bootstrap[.min].js datoteku
Za upotrebu glyph ikonica iskopirati i ceo fonts folder
Za pokretanje bilo kojeg JavaScript plugina neophodno je
uklju£iti i jQuery
Moºe i sa CDN-a - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 5 / 29


Osnove CSS Klase Zadatak

Instalacija

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 6 / 29


Osnove CSS Klase Zadatak

Upotreba

Dodati HTML5 doctype na stranicu zajedno sa odgovaraju¢om


charset denicijom.
Kako bi se omogu¢ile responsive funkcionalnosti, dodati
viewport meta tag
Uklju£iti Bootstrap CSS i JavaScript datoteke
Uklju£iti jQuery PRE Bootstrap JavaScript datoteke

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 7 / 29


Osnove CSS Klase Zadatak

Upotreba

1 <! DOCTYPE html>


2 < html>
3 <head>
4 <meta charset= " utf8 " >
5 <meta name= " viewport " content= "
width=device-width , initial-scale=1
">
6 <link rel= " stylesheet " href= " css /
bootstrap . min . css ">
7 <script src= " jquery-1 .11.0. js " >< /
script>
8 <script src= " js / bootstrap . min . js " >< /
script>
9 </head>
10 </ html>
Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 8 / 29
Osnove CSS Klase Zadatak

Kontejneri

Bootstrap zahteva element koji ¢e obuhvatiti sadrºaj stranice


(wrapper element)
Element se progla²ava kontejnerom dodavanjem jedne od
slede¢ih CSS klasa:
.container - kontejner ksne (predenisane) ²irine
.container-uid - kontejner koji se prostire celom ²irinom
prozora
Example01 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 9 / 29


Osnove CSS Klase Zadatak

Grid sistem

Koristi se za kreiranje layout-a stranice kroz seriju redova i


kolona (matrica)
Kolone se automatski reorganizuju u zavisnosti od veli£ine
okvira prikaza
Odgovaraju¢e skaliranje do 12 kolona kako se ekran (browser
prozor) pove¢ava
Gridovi se mogu i ugnjeºdavati
Predstavljaju vrlo lako re²enje za pravljenje HTML layouta, ali
nisu previ²e eksibilni

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 10 / 29


Osnove CSS Klase Zadatak

Grid sistem

Proces kreiranja grid sistema je vrlo sli£an pravljenju HTML


tabela
Kolone i redovi se kreiraju unutar Bootstrap kontejnera
Svaki red je jedan div element sa klasom .row
Svaka kolona u redu je opet div element sa klasom .col -
parametri <grid> (xs - telefoni, sm - tableti, md - desktop
urežaji, lg - ve¢i desktop urežaji), <size> (zbir je uvek 12)
Sadrºaj se dodaje u kolone
Example02 - link
Example03 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 11 / 29


Osnove CSS Klase Zadatak

Text i tipograja

Boostrap obezbežuje kontekstne klase i stil elemenata za


automatsko formatiranje teksta
Example04 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 12 / 29


Osnove CSS Klase Zadatak

Tabele

Bootstrap poseduje nekoliko prede nisanih stilova tabela - za


svaki od njih postoji klasa koju je potrebno dodati table
elementu
.table-striped - Naizmeni£ni svetliji i tamniji redovi
.table-bordered - Vidljivi su svi borderi
.table-hover - Dodaje hover efekat na redove tabele
.table-condensed - Kompaktniji prikaz
.table-responsive - tabela ¢e da skroluje horizontalno na malim
prikazima (ispod 768px) - na prikazima ve¢ih od 768px nema
razlike

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 13 / 29


Osnove CSS Klase Zadatak

Tabele

Redovima ili ¢elijama tabele (elementi tr i td ) se mogu


dodeljivate kontekstualne klase koje im odrežuju boju pozadine
Klase: active, success, info, warning, danger
Example05 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 14 / 29


Osnove CSS Klase Zadatak

Slike

Na raspolaganju nam je nekoliko CSS klasa koje kontroli²u


izgled slika
.img-rounded - Dodaje zakrivljene uglove na sliku.
.img-circle - Slika postaje kruºnog oblika (nije uvek savr²en
krug, samo je border-radius 50%)
.img-thumbnail - Dodaje mali okvir oko slike
.img-responsive - Slika se automatski pode²ava da stane na
ekran (primenjuje max-width: 100%; i height: auto; na sliku)
Example06 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 15 / 29


Osnove CSS Klase Zadatak

Dugmad

Sve za dugmad vaºi za HTML elemente: button, a i input


Klase za boju: btn-default, btn-primary, btn-success, btn-info,
btn-warning, btn-danger, btn-link
Klase za veli£inu: btn-lg, btn-md, btn-sm, btn-xs
Aktivno dugme: active
Neaktivno (disabled) dugme: disabled
Example07 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 16 / 29


Osnove CSS Klase Zadatak

Dugmad

Grupisanje vi²e programskih dugmadi vr²i se pomo¢u div


elementa sa klasom btn-group.
Veli£ina dugmi¢a se moºe podesiti i na nivou grupe (na primer
btngroup-lg )
Vertikalno grupisanje se postiºe klasom btn-groupvertical
Grupa koja zauzima celu ²irinu roditeljskog elementa:
btngroup-justied
Example08 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 17 / 29


Osnove CSS Klase Zadatak

Fontovi - glifovi

Tzv. Font inkonice


Bootstrap koristi ikonice iz kolekcije
Upotrebom glyph ikona dobija se ikonica koja je u stvari
tekstualni element (vrlo jednostavna za manipulaciju)
NAPOMENA: Glyph ikonice se ne¢e prikazivati ukoliko se ne
uklju£i Bootstrap folder fonts
Example09 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 18 / 29


Osnove CSS Klase Zadatak

Labele

Dopunjavaju elemente tekstualnim informacijama


Kreiraju se pomo¢u span elementa sa CSS klasom label
Imaju nekoliko kontekstualnih klasa
Example10 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 19 / 29


Osnove CSS Klase Zadatak

Paginacija

Bootstrap omogu¢ava jednostavno kreiranje kontrola za


paginaciju (podela sadrºaja na vi²e stranica i njihovo listanje)
Dodavanjem CSS klase pagination na HTML listu (ul)
Veli£ine: pagination-lg i pagination-sm
Aktivna stranica se moºe ozna£iti dodavanjem CSS klase
active
Breadcrumbs predstavljaju formu paginacije koja prikazuje
hijerarhijsku listu linkova
Kreira se dodavanjem klase breadcrumb na liste
pager klasa omogu¢ava paginaciju koja prikazuje samo
kontrole za sekvencijalno listanje stranica
Example11 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 20 / 29


Osnove CSS Klase Zadatak

Liste

Predstavlja neureženu (unordered) listu stavki


Dobija se dodavanjem CSS klase list-group na ul element
Stavkama liste (li) dodeljuje se klasa list-group-item
Sadrºaj stavki moºe biti bilo koji HTML sadrºaj
Example12 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 21 / 29


Osnove CSS Klase Zadatak

Padaju¢i meni

Dropdown - Interaktivna komponenta koja predstavlja padaju¢i


meni sa stavkama
Kreira se kombinovanjem HTML button i ul elemenata sa
odgovaraju¢im Bootstrap kalasama.
Example13 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 22 / 29


Osnove CSS Klase Zadatak

Collapse

Bootstrap omogu¢ava sakrivanje i prikazivanje elemenata


klikom na dugme ili link
Element koji se sakriva treba da ima CSS klasu collapse i id
atribut
Dugme za sakrivanje treba da ima data-toggle atribut sa
vredno²¢u collapse
Vrednost atributa data-target dugmeta za sakrivanje treba da
bude id elementa koji se sakriva
Example14 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 23 / 29


Osnove CSS Klase Zadatak

Navigacija

Bootstrap omogu¢ava kreiranje navigacije upotrebom


odgovaraju¢ih navbar CSS klasa
navbar-inverse - Tamnija tema
navbar-xed-top - Navigacija ¢e biti ksirana na vrhu stranice
navbar-xed-bottom - Navigacija ¢e biti ksirana na dnu
stranice
navbar-right - Stavke ¢e biti poravnate u desno
Bootstrap navigacija se automatski prilagožava veli£ini ekrana
Mogu¢a je kombinacija sa padaju¢im listama i glyph ikonama
za jednostavno kreiranje efektnih navigacionih menija
Example15 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 24 / 29


Osnove CSS Klase Zadatak

Ax

Ax omogu¢ava ksiranje elementa na ºeljenu poziciju bez


obzira na skrolovanje stranice
Fiksiranom elementu je potrebno dodati data-spy atribut sa
vredno²¢u ax
Potrebno je takože ru£no dodati CSS kod za pozicioniranje i
dimenzioniranje elemenata
Example16 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 25 / 29


Osnove CSS Klase Zadatak

Forme
Bootstrap omogu¢ava uni ciran i efektan izgled za forme
Uvek koristiti <form role="form"> - olak²ava pristup
korisnicima sa £ita£ima ekrana
Obuhvatiti labele i kontrole u <div class="form-group"> -
potrebno za optimalan spacing
Dodeliti CSS klasu form-control svim tekstualnim elementima
(input, textarea, select)
Dodeliti CSS klasu control-label labelama (nije obavezno)
Bootstrap obezbežuje 3 tipa layouta za forme:
1 Vertikalne - Podrazumevani izgled. Svaki element je u
possebnoj liniji
2 Inline - Dodavanjem CSS klase form-inline. Svi elementi su u
jednoj linij, poravnati u levo
3 Horizontalne - Klasa form-horizontal. Labele su u liniji sa
svojim elementima.
Example17 - link
Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 26 / 29
Osnove CSS Klase Zadatak

Forme

Neke korisne klase za input polja:


Stilovi za validaciju se primenjuju dodavanjem CSS klase
hasfeedback i neke od kontekstnih klasa na form-group
Kontekstne klase: has-error, has-warning i has-success
Veli£ina polja (ili cele grupe): input-lg/input-sm
Dodatna poruka uz polje: <span class="help-block">
Example18 - link

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 27 / 29


Osnove CSS Klase Zadatak

Carousel
Carousel omogu¢ava kreiranje komponente za cikli£ni pregled
elemenata
Vrlo korisno za kreiranje galerija
Elementi se automatski smenjuju, ali postoje i kontrole za
ru£no prebacivanje (ako se implementiraju)
Okvirni element: div sa klasom carousel i id atributom
Indikatori: ol lista sa klasom carousel-indicators, svaki indikator
je element liste (li)
Slajdovi: Navode se u div-u sa klasom carousel-inner, svaki od
elemenata je div sa klasom item
Kontrole: Kreiraju se pomo¢u linkova sa klasom
carouselcontrol (left i right)
Example19 - link
Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 28 / 29
Osnove CSS Klase Zadatak

Zadatak

Stati£ku HTML stranicu koja prikazuje listu nastavnika i


detaljan prikaz nastavnika stilizovati upotrebom Bootstrap
biblioteke

Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 29 / 29