Bootstrap

Osnove CSS Klase Zadatak
Bootstrap
Dragan Ivanovi¢
dragan.ivanovic@uns.ac.rs
2016.
Dragan Ivanovi¢,dragan.ivanovic@uns.ac.rs Bootstrap 1 / 29

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

Prednosti
Identi£an prikaz na svim modernim browser-ima

Responsive - sajt pravljen pomo¢u Bootstrapa se automatski
prilagoava ureaju na kojem se prikazuje
Mobile rst - Bootstrap kod inicijalno cilja na manje ekrane
(mobilne ureaje) i onda prilagoava komponente za ve¢e
ekrane
Open source
Dobro dokumentovan

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

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

Instalacija

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

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

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

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
ureaji, lg - ve¢i desktop ureaji), <size> (zbir je uvek 12)
Sadrºaj se dodaje u kolone
Example02 - link
Example03 - link

Text i tipograja
Boostrap obezbeuje kontekstne klase i stil elemenata za

automatsko formatiranje teksta
Example04 - link

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

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

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

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

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

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

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

Labele
Dopunjavaju elemente tekstualnim informacijama

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

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

Liste
Predstavlja neureenu (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

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

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

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 prilagoava veli£ini ekrana
Mogu¢a je kombinacija sa padaju¢im listama i glyph ikonama
za jednostavno kreiranje efektnih navigacionih menija
Example15 - link

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 takoe ru£no dodati CSS kod za pozicioniranje i
dimenzioniranje elemenata
Example16 - link

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 obezbeuje 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
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

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
Zadatak
Stati£ku HTML stranicu koja prikazuje listu nastavnika i

detaljan prikaz nastavnika stilizovati upotrebom Bootstrap
biblioteke

Bootstrap

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Bootstrap

Enviado por

Direitos autorais:

Formatos disponíveis

Osnove CSS Klase Zadatak

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

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

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

Identi£an prikaz na svim modernim browser-ima

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

Bootsrap ne daje web aplikaciji originalan izgled - ve¢ina

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

Potrebno je sa sluºbene stranice preuzeti kompajliranu verziju

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

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

Dodati HTML5 doctype na stranicu zajedno sa odgovaraju¢om

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

1 <! DOCTYPE html>

Bootstrap zahteva element koji ¢e obuhvatiti sadrºaj stranice

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

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

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

Proces kreiranja grid sistema je vrlo sli£an pravljenju HTML

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

Boostrap obezbeuje kontekstne klase i stil elemenata za

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

Bootstrap poseduje nekoliko prede nisanih stilova tabela - za

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

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

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

Na raspolaganju nam je nekoliko CSS klasa koje kontroli²u

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

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

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

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

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

Tzv. Font inkonice

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

Dopunjavaju elemente tekstualnim informacijama

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

Bootstrap omogu¢ava jednostavno kreiranje kontrola za

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

Predstavlja neureenu (unordered) listu stavki

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

Dropdown - Interaktivna komponenta koja predstavlja padaju¢i

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

Bootstrap omogu¢ava sakrivanje i prikazivanje elemenata

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

Bootstrap omogu¢ava kreiranje navigacije upotrebom

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

Ax omogu¢ava ksiranje elementa na ºeljenu poziciju bez

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

Neke korisne klase za input polja:

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

Stati£ku HTML stranicu koja prikazuje listu nastavnika i

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

Você também pode gostar

Boostrap obezbeuje kontekstne klase i stil elemenata za

Predstavlja neureenu (unordered) listu stavki

Ax omogu¢ava ksiranje elementa na ºeljenu poziciju bez