Embed Size (px)
Citation preview
1 Veb dizajn
BOOTSTRAP 4
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
Veb dizajn 2
RESPONSIVE WEB DIZAJN
CDN
Bez instalacije već preko Content Delivery Network -a (mreţe za
ditribuciju sadrţaja)
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bo
otstrap.min.css">
Instaliranje
https://getbootstrap.com/
Prekompajlirana i minimizovana verzija
<link rel = "stylesheet" href = "css/bootstrap.min.css" >
Veb dizajn 3
PODEŠAVANJE OKRUŢENJA
Kreiranje stranica pomoću redova i kolona
Maksimum 12 kolona
Grid sistem je responsive i kolone se automatski
prilagođavaju veličini ekrana
Veb dizajn 4
GRID SISTEM
span
1
span
1
span
1
span
1
span
1
span
1
span
1
span
1
span
1
span
1
span
1
span
1
span 4 span 4 span 4
span 4 span 8
span 6 span 6
span 12
Koristiti redove za horizontalno grupisanje kolona
Redovi moraju biti unutar container klase da bi se postiglo
odgovarajuće poravnanje
Sadrţaj treba da bude unutar kolona, a samo kolone smeju
biti direktna deca redova
Kolone se kreiraju navođenjem koliko od 12 mogućih kolona
ţelimo da zauzmemo
Veb dizajn 5
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 od 768px)
.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 srednje u
ređaje dovoljno je da deifinišemo samo sm
Veb dizajn 6
GRID KLASE
<div class = "container">
<div class = "row">
<div class = "col-*-*"></div>
<div class = "col-*-*"></div>
</div>
<div class = "row">...</div>
</div>
<div class = "container">
.. . .
</div>
Veb dizajn 7
OSNOVNA GRID STRUKTURA
<div class="row">
<div class="col">.col</div>
<div class="col">.col</div>
<div class="col">.col</div>
</div>
Veb dizajn 8
JEDNAKE KOLONE
Problem ako kolone nisu istih visina
Veb dizajn 9
CLEARFIX
Za pomeranje kolone
offset-md-3 (v4)
Veb dizajn 10
OFFSET KOLONE
Veb dizajn 11
UGNJEŢDAVANJE KOLONA
<div class="container">
<div class="row">
<div class="col">
First, but unordered
</div>
<div class="col order-12">
Second, but last
</div>
<div class="col order-1">
Third, but first
</div>
</div>
</div> Veb dizajn 12
REĐANJE KOLONA
Bootstrap default:
font-size: 16px
line-height: 1.5
font-family: Helvetica Neue, Helvetica, Arial
Naslovi
<h1>-<h6> - veći font i bolder
Display naslovi
.display-1, .display-2, .display-3, .display-4 – veći font i manji bold
<small> - sekundarni tekst u naslovu
<mark> - ţuta pozadina i padding
Veb dizajn 13
TIPOGRAFIJA (1)
<abbr> - akronim
<dl> - deskripciona lista
<code> - prikaz programskog koda
<kbd> - prikaz elemenata sa tastature
<pre> - preformatiran tekst
Dodatne klase:
.font-italic
.lead
.text-justify
.text-capitalize
.list-inline
Veb dizajn 14
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.
Veb dizajn 15
BOJE
.table
.table-striped
.table-bordered
.table-hover
.table-dark
.table-dark .table-striped
.thead-dark
.thead-light
.table-sm
.table-responsive
Veb dizajn 16
TABELE (1)
Kontekstualne klase:
.table-primary
.table-success
.table-danger
.table-info
.table-warning
.table-active
.table-secondary
.table-light
.table-dark
Veb dizajn 17
TABELE (2)
Oblici:
.rounded
.rounded-circle
.img-thumbnail
Poravnanje
.float-right
.float-left
Responsive
.img-fluid
Veb dizajn 18
SLIKE
. jumbotron
<div class="jumbotron jumbotron-fluid">
<div class="container">
<Jumbotron full-width</h1>
</div>
</div>
.page-header
Veb dizajn 19
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
Veb dizajn 20
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
Veb dizajn 21
DUGMAD (2)
Veličine dugmica
btn-lg
btn-sm
btn-block
active/disabled
btn-group
btn-group-vertical
Veb dizajn 22
DUGMAD (3)
Veb dizajn 23
ALERTS (1)
Otvaranje: $('.alert') .alert ()
Zatvaranje:
$().alert('close')
<div class="alert alert-success alert-dismissible">
<button type="button" class="close" data-
dismiss="alert">×</button>
<strong>Success!</strong> Indicates a successful or
positive action.
</div>
Animacija
fade
show
Veb dizajn 24
ALERTS (2)
Sintaksa <span class="glyphicon glyphicon-name"></span>
Envelope icon:
<span class="glyphicon glyphicon-envelope"></span>
Search icon:
<span class="glyphicon glyphicon-search"></span>
Print icon:
<span class="glyphicon glyphicon-print"></span>
Veb dizajn 25
GLYPHICONS (V3)
Dodatne informacije bilo kom sadrţaju
Prilagođavaju se veličini roditelja
badge badge-primary
badge badge-secondary
badge badge-success
badge badge-danger
badge badge-info
badge badge-light
badge badge-dark
Veb dizajn 26
BEDŢEVI
Prikaz koliko je korisnik napredovao u procesu
<div class="progress">
<div class="progress-bar" style="width:70%">
70%
</div>
</div>
<div class="progress">
<div class="progress-bar bg-success progress-bar-striped" style="width:40%;height:20%"></div>
</div>
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 40%"></div>
Veb dizajn 27
PROGRESS BAR
<ul class="pagination">
<li class="page-item"><a class="page-
link" href="#">Previous</a></li>
<li class="page-item"><a class="page-
link" href="#">1</a></li>
<li class="page-item active"><a class="page-
link" href="#">2</a></li>
<li class="page-item"><a class="page-
link" href="#">3</a></li>
<li class="page-item"><a class="page-
link" href="#">Next</a></li>
</ul>
Veb dizajn 28
PAGINACIJA
<ul class="pager">
<li><a href="#">Previous</a></li>
<li><a href="#">Next</a></li>
</ul>
Veb dizajn 29
PAGER (V3)
<ul class="breadcrumb">
<li class="breadcrumb-
item"><a href="#">Photos</a></li>
<li class="breadcrumb-item"><a href="#">Summer
2017</a></li>
<li class="breadcrumb-
item"><a href="#">Italy</a></li>
<li class="breadcrumb-item active">Rome</li>
</ul>
Veb dizajn 30
BREADCRUMBS
<ul class="list-group">
<li class="list-group-item active">Active item</li>
<li class="list-group-item">Second item</li>
<li class="list-group-item">Third item</li>
</ul>
Veb dizajn 31
LINK GRUPE (1)
<div class="list-group"> <a href="#" class="list-group-item list-group-item-action">Action item</a> <a href="#" class="list-group-item list-group-item-success">Success item</a> <a href="#" class="list-group-item list-group-item-secondary">Secondary item</a> <a href="#" class="list-group-item list-group-item-info">Info item</a> <a href="#" class="list-group-item list-group-item-warning">Warning item</a> <a href="#" class="list-group-item list-group-item-danger">Danger item</a> <a href="#" class="list-group-item list-group-item-primary">Primary item</a> <a href="#" class="list-group-item list-group-item-dark">Dark item</a> <a href="#" class="list-group-item list-group-item-light">Light item</a> </div>
Veb dizajn 32
LINK GRUPE (2)
Veb dizajn 33
LINK GRUPE (3)
<div class="card" style="width:400px">
<img class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
<h4 class="card-title">John Doe</h4>
<p class="card-text">Some example text.</p>
<a href="#" class="btn btn-primary">See Profile</a>
</div>
</div>
Veb dizajn 34
KARTICE (PANEL V3)
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</div>
Veb dizajn 35
DROPDOWNS (1)
dropdown-divider
dropdown-header
dropup
Veb dizajn 36
DROPDOWNS (2)
<button data-toggle="collapse" data-target="#demo">Collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor text....
</div>
accordion
Veb dizajn 37
COLLAPSE (1)
<div id="accordion"> <div class="card"> <div class="card-header"> <a class="card-link" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> Collapsible Group Item #1 </a> </div> <div id="collapseOne" class="collapse show"> <div class="card-body"> Lorem ipsum.. </div> </div> </div>
Veb dizajn 38
COLLAPSE (2)
<div class="card"> <div class="card-header"> <a class="collapsed card-link" data-toggle="collapse" data-parent="#accordion"href="#collapseTwo"> Collapsible Group Item #2 </a> </div> <div id="collapseTwo" class="collapse"> <div class="card-body"> Lorem ipsum.. </div> </div> </div>
</div>
Veb dizajn 39
COLLAPSE (3)
Horizontalni meni
<ul class="nav justify-content-center"> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Veb dizajn 40
NAVS
<ul class="nav nav-tabs"> <li class="nav-item"> <a class="nav-link active" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul>
Veb dizajn 41
TABOVI (1)
<ul class="nav nav-pills"> <li class="nav-item"> <a class="nav-link active" data-toggle="pill" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu1">Menu 1</a> </li> <li class="nav-item"> <a class="nav-link" data-toggle="pill" href="#menu2">Menu 2</a> </li> </ul>
Veb dizajn 42
TABOVI (2)
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active container" id="home">...</div>
<div class="tab-pane container" id="menu1">...</div>
<div class="tab-pane container" id="menu2">...</div>
</div>
Veb dizajn 43
TABOVI (3)
Veb dizajn 44
NAVBAR
<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <a class="navbar-brand" href="#"> <img src="bird.jpg" alt="Logo" style="width:40px;"> </a> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">Active</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Link</a> </li> <li class="nav-item"> <a class="nav-link disabled" href="#">Disabled</a> </li> </ul> </nav>
media
media-left
media-body
Media-heading
Veb dizajn 45
MEDIA OBJEKTI
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="ny.jpg" alt="New York">
</div>
</div>
Veb dizajn 46
SLIDESHOW (1)
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
Veb dizajn 47
SLIDESHOW (2)
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div> Veb dizajn 48
MODALI
Border
Veb dizajn 49
POMOĆNE KLASE (1)
Border color
Veb dizajn 50
POMOĆNE KLASE (2)
Border radius
Veb dizajn 51
POMOĆNE KLASE (3)
Width
Veb dizajn 52
POMOĆNE KLASE (4)
Height
Veb dizajn 53
POMOĆNE KLASE (5)
Veb dizajn 54
VEŢBANJE (1)
Veb dizajn 55
VEŢBANJE (2)
Veb dizajn 56
VEŢBANJE (2)
Veb dizajn 57
VEŢBANJE (2)
