Bootstrap

dr Suzana Marković, dipl.ing. el.suzana.markovic@bpa.edu.rs

PresenterPresentation Noteshttps://www.udemy.com/share/101rxOAkEfdl5aQXg=/

https://www.youtube.com/watch?v=9cKsq14Kfsw&t=686s

http://www.w3schools.com/bootstrap/default.asp

Šta je Bootstrap?

Bootstrap je front-end framework koji služi za brzu izradu veb stranica i veb aplikacija.

To je kolekcija CSS i HTML pravila i JavaScript ekstenzija koje koristi neke najnovije tehnike pretraživača, pruža modernu tipografiju, forme, dugmad, tabele, navigaciju i sve što je potrebno za izradu jedne Veb stranice.

Šta je Bootstrap?

Od verzije 2.0 u potpunosti podržava izradu prilagodljivih veb stranica.

Framework:Ima dobru dokumentacijupotpuno je besplatan i open-source - svako

može da ga dorađuje i prosledi drugima. Može se preuzeti sa zvaničnog sajta

www.getbootstrap.com, a trenutna aktuelna verzija je 4.

Tvorci Bootstrap-a su Mark Otto i Jacob Thornton, dva programera koja su radila za kompaniju Twitter.

Automatsko prilagođavanje sajtova da izgledaju dobro na svim uređajima

Bootstrap

Font end frejmwork za brži i lakši razvoj veb sajtova

Koristi HTML, CSS i JavaScript

Mobile first strategy

Najnovija verzija: Bootstrap 4

RESPONSIVE WEB DIZAJN

Vebdizajn4

Bootstrap struktura

Nakon preuzimanja Bootstrap-a sa zvaničnog sajta neophodno je raspakovati WinRar arhivu sa 3 direktorijuma: css, fonts i js:css – sadrži već formirane klase koje treba

primeniti na elemente html stranice. Na zvaničnom sajtu bootstrapa postoji

dokumentacija gde se može pogledati kako će se pojedini elementi prikazivati na stranici.

Bootstrap Struktura fonts – sadrži oko 200 Glyphicons u font

formatu koje se mogu koristiti na stranici. Primenjuju se tako što se u tagu

pod atributom “class” upiše naziv glyphicona, kao na sledećem primeru:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_glyphs&stacked=h

Bootstrap Struktura

js – sadrži JavaScript funkcije koje omogućavaju razne mogućnosti kao što je Carousel ili dropdown animacije i ostalo.

U CSS fajlu se nalaze sve neophodne klase za izradu jedne veb stranice, dok će se JavaScript fajl pozvati ukoliko je potrebno veb stranici dodati malo dinamike.

Bootstrap Struktura

Bootstrap.min.css i bootstrap.min.js su takozvani minimizovani fajlovi.

Po svom sadržaju potpuno su identični bootstrap.css i bootstrap.js fajlovima, jedino se razlikuju u tome što .min fajlovi imaju ceo kod ispisan u jednom redu, bez znakova razmaka (space), novih redova itd. kako bi zauzeli što manje mesta na serveru i time se brže učitavali.

Nisu ni malo pregledni pa je jako teško vršiti neke izmene u njima.

Kako se koristi Bootstrap? (1)

Prvo treba preuzeti Bootstrap sa zvaničnog sajta i smestiti fajlove u direktorijum veb projekta.

Bootstrap.css se poziva kao i svaki drugi eksterni css fajl. U tag je potrebno dodati sledeći kod:

Kako se koristi Bootstrap? (1)

Da bi veb stranica bila prilagodljiva na svim rezolucijama i veličinama ekrana u tagu treba dodati i sledeće:

Naziv stranice

Kako se koristi Bootstrap? (2)

Drugi način je učitati bootstrap.css i bootstrap.js fajlove u HTML sa njihovog servera, dakle bez preuzimanja fajlova.

Na zvaničnom sajtu u glavnom meniju bira se “Getting started” i ispod linkova za preuzimanje bootstrap-a bira neophodan kod.

Bootstrap CDN

http://getbootstrap.com/getting-started/

Grid sistem Kreiranje stranica pomoću redova i kolonaMaksimum 12 kolonaGrid sistem je responsive i kolone se

automatski prilagođavaju veličini ekranaBootstrap ima jedan grid sistem sa 4 nivoa

prilagodljivosti, što znači da je prilagođen za četiri različite veličine ekrana – veliki monitori, laptop računari, tablet uređaji i mobilni telefoni.

Grid sistem Ako na stranici postoji 12 divova, na desktop

računaru će se, npr. oni prikazati u 3 reda sa po 4 diva.

Na nešto manjem ekranu, npr. kod laptop računara, prikazaće se u 4 reda po 3 diva.

Na tablet uređaju će biti 2 kolone sa po 6 divova Na mobilnim uređajima će svaki div biti u novom

redu.

Grid sistem

Grid sistem bootstrapa

Kod bootstrapa je cela stranica podeljena na 12 kolona, pa se tako jednostavno može da odrediti širina određenih sekcija na stranici samo pozivanjem određene klase.

Koristiti redove za horizontalno grupisanje kolonaRedovi moraju biti unutar container klase da bi se postiglo

odgovarajuće poravnanje

Sadržaj treba da bude unutar kolona, a samo kolone smejubiti direktna deca redova

Kolone se kreiraju navođenjem koliko od 12 mogućih kolonaželimo da zauzmemo.

KAKO RADI GRID SISTEM

Grid sistem ima 5 klasa:

.col- (extra small devices – širina ekrana manja od 576px)

.col-sm- (small devices – širina ekrana veća ili jednaka od 576px)

.col-md- (medium devices - – širina ekrana veća ili jednaka od768px)

.col-lg- (large devices - – širina ekrana veća ili jednaka od 992px)

.col-xl- (xlarge devices -– širina ekrana veća ili jednaka od 1200px)

Ako želimo da specificiramo istu širinu za male i srednjeuređaje dovoljno je da definišemo samo sm.

GRID KLASE

...

....

OSNOVNA GRID STRUKTURA

JEDNAKE KOLONE

c l a s s = " c o l " > . c o l < / d i v >

c l a s s = " c o l " > . c o l < / d i v >

c l a s s = " c o l " > . c o l < / d i v >

Problem ako kolone nisu istih visina

CLEARFIX (V3)

21

Za pomeranje kolone

offset-md-3 (v4)

OFFSET KOLONE

UGNJEŽDAVANJE KOLONA

Vebdizajn

First, but unordered

Second, but last

Third, but first

REĐANJE KOLONA

Bootstrap default:

font-size: 16px

line-height: 1.5

font-family: Helvetica Neue, Helvetica, Arial

Naslovi

- -veći font i bolder

Display naslovi

.display-1, .display-2, .display-3, .display-4 – veći font i manji bold

-sekundarni tekst u naslovu

-žuta pozadina i padding

25

TIPOGRAFIJA (1)

- akronim

-deskripciona lista

-prikaz programskog koda

-prikaz elemenata sa tastature

-preformatiran tekst

Dodatne klase: .font-italic, .font-weight-bold

.lead

.text-justify, .text-left, .text-right, .text-center

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

.list-inline, .list-inline-item

TIPOGRAFIJA (2)

“meaning through colors”

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

warning, .text-danger, .text-secondary, .text-white, .text-

dark and .text-light

Može i nad linkovima -> tamniji hover

Pozadinske boje:

.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-

secondary, .bg-dark and .bg-light.

BOJE

.table .table-striped .table-bordered .table-hover .table-dark .table-dark .table-striped

.thead-dark .thead-light .table-sm .table-responsive

TABELE (1)

Kontekstualne klase:

.table-primary

.table-success

.table-danger

.table-info

.table-warning

.table-active

.table-secondary

.table-light

.table-dark

TABELE (2)

Oblici:

.rounded

.rounded-circle

.img-thumbnail

Poravnanje

.float-right

.float-left

.mx-auto .dblock

Responsive

.img-fluid

SLIKE

.jumbotron

Jumbotron< / d i v >

< / d i v >.page-header

JUMBOTRON

btn

btn btn-primary

btn btn-secondary

btn btn-success

btn btn-info

btn btn-warning

btn btn-danger

btn btn-dark

btn btn-light

DUGMAD (1)

btn btn-outline-primary

btn btn-outline-secondary

btn btn-outline-success

btn btn-outline-info

btn btn-outline-warning

btn btn-outline-danger

btn btn-outline-dark

btn btn-outline-light

DUGMAD (2)

Veličine dugmica

btn-lg

btn-sm

btn-block

active/disabled

spinner buttons

btn-group

btn-group-vertical

DUGMAD (3)

ALERTS (1)

35

Otvaranje: $('.alert').alert()

Zatvaranje: $().alert('close')

36

data -

a successf ul or

& t i mes ; < / bu t t o n>

Success! I ndi cat es p o s i t i v e a c t i o n .< / d i v>

Animacija fade

show

ALERTS (2)

< ! - - B u t t o n t o Op en t h e Mo d a l - - >

Ope n mo d a l

< ! - - The Moda l - - >

< ! - - Mo d a l Head e r - - >

Modal Hea d i n g &t i m e s ; < / b u t t o n >

< ! - - Mo d a l body - - >

Mo d a l body . .

< ! - - Mo d a l f o o t e r - - >

C lo se

MODALI

Sintaksa

Envelope icon:

< /sp an >

Search icon:

< /sp an >

Print icon:

< / s p a n >

38

* * A l t e r n a t i v a : Font Awesome, Oc t icons…

GLYPHICONS (V3)

Prikaz koliko je korisnik napredovao u procesu

s t y l e =" wi dt h: 70%">

< / d i v >

c l a s s = " p r o g r e s s - b a r bg-success p r o g r e s s - b a r -s t y l e = " w i d t h : 4 0 % ; h e i g h t : 2 0 % " > < / d i v >

< d i vs t r i p e d "

< / d i v > M u l t i p l e progress bars

PROGRESS BAR

39

J o h n Doe

Some example t e x t . c l a s s = " b t n

Pr of i l e

Dropdown b u t t o n

< / b u t t o n >

L i n k

123

< / d i v >

DROPDOWNS (1)

41

dropdown-divider

dropdown-header dropup

DROPDOWNS (2)

42

C o l l a p s i b l e < / b u t t o n >

Lorem ipsum d o l o r t e x t . . . .< / d i v >

accord ion

COLLAPSE (1)

43

C o l l a p s i b l e Group I tem #1

44

Lorem i p s u m . .< / d i v >

< / d i v >< / d i v >

COLLAPSE (2)

45

Group I tem #2C o l l a p s i b l e

i psum. .Lorem

< / d i v >< / d i v >

< / d i v >< / d i v >

COLLAPSE (3)

Horizontalni meni < u l c l a s s = "n a v j u s t i f y - c o n t e n t - c e n t e r " >

< l i c l a s s = " n a v - i t e m " > L i n k < / a >

< / l i >

46

L i n k < / a >

L i n k < / a >< / l i >

NAVS

< l i c l a s s = " n a v - i t e m " >

A c t i v e < / a >< / l i >< l i c l a s s = " n a v - i t e m " >

L i n k < / a >< / l i >< l i c l a s s = " n a v - i t e m " >

L i n k < / a >< / l i >< l i c l a s s = " n a v - i t e m " >

TABOVI (1)

47

< u l c l a s s = "n a v n a v - p i l l s " >< l i c l a s s = " n a v - i t e m " >

Home

< / l i >< l i c l a s s = " n a v - i t e m " >

Menu 1

< / l i >< l i c l a s s = " n a v - i t e m " >

Menu 2t o g g l e = " p i l l "< / l i >

< / u l >

TABOVI (2)

< ! - - Tab panes - - >< d i v c l a s s = " t a b - c o n t e n t " >

. . . < / d i v >

c ont ai ner "c ont ai ner "

id="menu1 " > . . . < / d i v >i d = " m e n u 2 " > . . . < / d i v >

TABOVI (3)

49

NAVBAR

< u l c l a s s = " n a v b a r - n a v " >

A c t i v e < / a >

< / l i >

h r e f = " # " > L i nk < / a>

h r e f = " # " > L i nk < / a>

h r e f = " # " > D i s ab l ed< / a>< l i c l a s s = " n a v - i t e m " >

< / u l >

50

media media-left media-body Media-heading

MEDIA OBJEKTI

51

< ! - - I n d i c a t o r s - - >

< / l i > < / l i > < / l i >

< ! - - The s l i d e s h o w - - >

< / d i v >

< / d i v >

< / d i v >

SLIDESHOW (1)

< ! - - L e f t and r i g h t c o n t r o l s - - >

53

< / d i v >

SLIDESHOW(2)

Link - Bootstrap tutorijal

https://www.udemy.com/share/101rxOAkEfdl5aQXg=/

www.youtube.com/watch?v=9cKsq14Kfsw&t=686s

https://www.udemy.com/share/101rxOAkEfdl5aQXg=/https://www.youtube.com/watch?v=9cKsq14Kfsw&t=686s

BootstrapŠta je Bootstrap?Šta je Bootstrap?RESPONSIVE WEB DIZAJN Bootstrap struktura Bootstrap Struktura Bootstrap Struktura Bootstrap Struktura Kako se koristi Bootstrap? (1)Kako se koristi Bootstrap? (1)Kako se koristi Bootstrap? (2)Bootstrap CDN�Grid sistem Grid sistem Grid sistem Grid sistem bootstrapaKAKO RADI GRID SISTEMGRID KLASEOSNOVNA GRID STRUKTURAJEDNAKE KOLONESlide Number 21OFFSET KOLONEUGNJEŽDAVANJE KOLONAREĐANJE KOLONATIPOGRAFIJA (1)TIPOGRAFIJA (2)BOJETABELE (1)TABELE (2)SLIKEJUMBOTRONDUGMAD (1)DUGMAD (2)DUGMAD (3)ALERTS (1)ALERTS (2)MODALIGLYPHICONS (V3)PROGRESS BARKARTICE (PANEL V3)DROPDOWNS (1)DROPDOWNS (2)COLLAPSE (1)COLLAPSE (2)COLLAPSE (3)NAVSTABOVI (1)TABOVI (2)TABOVI (3)NAVBARMEDIA OBJEKTISLIDESHOW (1)SLIDESHOW(2)Link - Bootstrap tutorijal