Bootstrap

Student: Luka Glušica

Broj indeksa: 1537/14
Sadržaj
O Bootstrap-u
Uvod
Grid sistem
Tipografija i helper klase
Tabele
Navigacioni bar
Dugmad
Forme i inputi
Zaključak
O Bootstrap-u
Šta je Bootstrap?
Besplatan front-end framework
CSS/JavaScript
Responizvni dizajn

Istorijat
Prvobitno nazvan Twitter Blueprint
Mark Otto i Jacob Thornton
2011, 2012, 2013(mobile first)
Uvod
Instalacija (2 načina):
Download sa sajta getbootstrap.com
 Lokalno uključivanje u HTML stranicu
Uključivanje Bootstrap-a preko CDN-a (Content Delivery Network):
Uvod
Kako se Bootstrap primenjuje u HTML-u?
<tag class=“bootstrap klasa/klase”></tag>
Primeri:
 <button class=“btn btn-default”>…</button>
 <div class=“container”>…</div>
 <span class=“glyphicon glyphicon-envelope”>…</span>
 <nav class=“nav navbar-default”>…</nav>
 <p class=“text-primary”>…</p>
Grid sistem
Podsetnik: „colspan“ atribut <td colspan=“2”> </td>
„Tabela“ od 12 kolona
Garantuje responzivnost – raspored kolona će se automatski menjati i
prilagodjavati najboljem mogućem izgledu, zavisno od veličine ekrana.
Grid sistem
Klase: container, container-fluid, row, col-[xs/sm/md/lg]-[1...12]
Pravila za grid sistem:
 Sve gorepomenute klase se uglavnom smeštaju u okviru <div> tagova
 Klase container i container-fluid obezbedjuju odgovarajuća formatiranja (alignment, padding) i
unutar ovih klasa se smeštaju <div> tagovi sa ostalim klasama (row, col-*-*)
 container – predstavlja „omotač“ fiksne dužine
 container-fluid – predstavlja „omotač“ koji se prostire u širini celog ekrana
 Klasa row se smešta u <div> tag, koji se nalazi unutar container klase i predstavlja red u
zamišljenoj tabeli
 Klasa col-*-* predstavlja kolonu našeg grid sistema i u okviru ove klase se smešta željeni sadržaj
 xs – mobilni uredjaju
 sm – tablet uredjaji
 md – laptop uredjaji
 lg – desktop uredjaji
Grid sistem
Grid sistem
Tipografija i helper klase
Bootstrap default podešavanja (font, line spacing…)
Neki od HTML elemenata, na koje se Bootstrap-ova default
podešavanja odnose:
 <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
 <strong>, <em>, <small>, <mark>
 <kbd>, <code>
 <abbr>, <blockquote>
 <dl>, <ul>, <ol>
 <pre>
Tipografija i helper klase
Helper klase se odnose na „pomagala“ u stilizovanju odredjenih HTML
elemenata.

Bojenje teksta, bojenje pozadine teksta, tabele, dugmeta itd.

Posebno su značajne sledeće helper klase:

visible-*
hidden-*
*(xs,sm,md,lg)
Tipografija i helper klase
Tabele
Tabele, odnosno <table> elementi se mogu stilizovati formatirati
pomoću klasa:
table
table-striped
table-bordered
table-hover
table-condensed
table-responsive
<table class=“table”>
…
</table>

<table
class=“table table-striped”>
…
</table>

<table
class=“table table-bordered”>
…
</table>
Navigacioni bar
Prema HTML5 konvenciji, poželjno je koristiti <nav> tag, kao semantičku
oznaku za definisanje navigacionog bara, odnosno seta navigacionih
linkova.
Navigacioni bar se najčešće koristi u kombinaciji sa listama (<ul>,<li>)
Bootstrap klase za stilizovanje navigacionog bara, kao i liste u okviru
njega:
navbar, navbar-default, navbar-inverse – smeštaju se u <nav> tag
nav, navbar-nav – smeštaju se u <ul> tag
navbar-header, navbar-brand – header-om se daje značaj odredjenom delu
navigacionog bara (npr. naslov sajta), a brand-om se stilizuje sadržaj unutar
header-a (najčešće link, <a>)
Navigacioni bar
Još klasa:
• Navbar-fixed-top
• Navbar-fixed-bottom
• Navbar-left
• Navbar-right
Navigacioni bar
Dugmad
Klase: • active
btn-default
• disabled
btn-success
btn-info
• btn-lg
btn-warning
• btn-md
btn-danger
• btn-sm
btn-link
• btn-xs

Napomena: navedene klase se mogu koristiti u okviru sledećih HTML elemenata:

• <button>
• <a>
• <input> - odnosi se na tipove „submit“ i „button“
Dugmad
Grupisanje dugmadi pomoću klase btn-group

Još klasa: btn-group-vertical, btn-group-[xs,sm,md,lg],

btn-group-justified...
Forme i inputi
Bootstrap nudi 3 tipa layout-a za forme:
 Vertikalni layout (default)
 Horizontalni layout – klasa form-horizontal
 Inline layout – klasa form-inline

Standardna pravila:
 U okviru form tag-a uvek treba definisati atribut role, kao <form role=“form”>…</form>
 Sve vrste inputa, uključujući i label-e koji ih prate treba grupisati u okviru <div> tagova sa
klasom form-group, <div class=“form-group” >...</div>
 Sve vrste tekstualnih unosa (<input>, <textarea>, <select>) moraju imati klasu form-control
Forme i inputi
form-horizontal ili form-inline

u slučaju form-horizontal
potrebno je svakom label tagu
dodati klasu control-label, i
celokupnu formu smestiti u
jedan grid sistem, gde će se
svakom label tagu dodeliti
klasa col-*-*, a input tag će se
smestiti u div tag sa klasom
col-*-*
Forme i inputi
Forme i inputi
Zaključna razmatranja
Korisni linkovi
http://www.w3schools.com/bootstrap/default.asp
http://getbootstrap.com/

Bootstrap je otvorenog koda i konstantno se razvija

Zaključna razmatranja
Prednosti Bootstrap-a:
Jednostavan za upotrebu: dovoljno je osnovno poznavanje HTML-a i CSS-a
Responzivni dizajn
Kompatibilnost sa pretraživačima

Mane Bootstrap-a:
Teško ga je integrisati u postojeći projekat
Ponekad je problem uskladiti ga sa zahtevima korisnika, bez override-
ovanja CSS-a ili upotrebe dodatnog JavaScript/Jquery koda.
HVALA NA PAŽNJI !!!