Post on 15-Feb-2021
transcript
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