Embed Size (px)
Prilagodljivi web dizajn
Kako da kreiramo prilagodljivi kao i JavaScript okvira za prilagodljivi dizajn
Prilagodljiv web dizajn je poslednjih nja nego na samim
, primer LG G3 telefon ima rezoluciju od 1440 x 2560, ali je problem kako
iskoristiti
Osnove prilagodljivog web dizajna
Kori , ali
je isplativ pa je
Slika 1: Primer prilagodljive web alikacije za vremensku
paljenju web aplikacije. Dolaskom CSS-
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgreen;
}
@media screen and (max-width: 300px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
ti svetlo zelena dok kada
</body>
</html>
Kori
if ($(window).width() <= 300) {
$("body").css("background-color","lightblue"); }
else {
$("body").css("background-color","lightgreen");
}
Naravno, ovaj kod mora u tom sluprvi put:
$(document).ready(function(){
if ($(window).width() <= 300) {
$("body").css("background-color","lightblue");
}
else {
$("body").css("background-color","lightgreen");
}
});
$( window ).resize(function() {
if ($(window).width() <= 300) {
$("body").css("background-color","lightblue");
}
else {
$("body").css("background-color","lightgreen");
}
});
http://jquery.com/download/
Naravno, -u bez dodatnih biblioteka ali je mnogo jednostavnije koristiti
slabu procesorsku snagu i memoriju pa je nekad potrebno da ovo realizujemo i kroz cist JavaScript.
<html>
<head>
<script>
window.onresize = function(event) {
if(window.innerWidth <= 300){
document.body.style.background = 'lightblue';
} else{
document.body.style.background = 'lightgreen';
}
};
window.onload = function(e){
if(window.innerWidth <= 300){
document.body.style.background = 'lightblue';
} else{
document.body.style.background = 'lightgreen';
}
};
</script>
</head>
<body>
</body>
</html>
-a i JQuery-ja u - -
-a tako kod CSS-a postoje okviri doljivih web stranica. Jedan od najpopularnijih okvira za CSS je Bootstrap.
Bootstrap
Bootstrap je najpopularniji HTML, CSS i JavaScript okvir (engl. Framework). Bootstrap je napravila kompanija
Slika 2: Primer bootstrap teme.
Kako bi koristili Bootstrap prvo u head moramo dodati CSS i JavaScript fajlove koje Bootstrap koristi:
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
-u trebaju da budu mobilno kompatibilne moramo dodati meta tag koji nam
<meta name="viewport" content="width=device-width, initial-scale=1">
U telu HTML-a potreban nam je div kontejner za sam sajt. U bootstrap-container-fluid i container.
container-
Bootsrap Grid sistem
itd..
Slika 3: Bootstrap grid sistem
Grid sistem Bootstrap- se (xs, sm, md, lg)
XS je grid klasa za telefone
SM
MD
LG
Primer 1: -u
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Primer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<p>Menjajte velicinu prozora kako bi videli efekat Bootstrapa.</p>
<div class="row">
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavenderblush;">.col-sm-4</div>
<div class="col-sm-4" style="background-color:lavender;">.col-sm-4</div>
</div>
</div>
</body>
</html>
U Bootstrap-u postoji klasa za veliki naslov koji treba da stoji ispod menija a to je jumbotron klasa.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>Moja prva responsive stranica</h1>
<p>Menjajte velicinu prozora kako bi videli efekat Bootstrapa.</p>
</div>
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>
</div>
</div>
</body>
</html>
Slika 4: Stranica sa 3 kolone i jumbotron naslovom.
Bootstrap navigacioni meni
Kako bismo navbar navbar-default. Pored ovoga navigacioni meni mora da ima header, brend kao i navbar nav koji predstavlja linkove u samom meniju.
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">Ime web aplikacije</a>
</div>
<div>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
Slika 6: Web sajt sa navigacionim menijem u Bootstrapu
Kada
Slika 7: Prikaz na mobilnom telefonu
navbar- -dugme potrebno je koristiti dugme sa navbar-toggle klasom.
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
-http://getbootstrap.com/components/
S
Bootstrap forme
Kako bi se napravila forma prilagodljivog dizajna u Bootstrapu potrebno je koristiti njegove klase. Svaki input element mora da se nalazi unutar form-group klase. Kada se pravi label potrebno je da postoji for atribut u kome treba upisati ID input polja za koje je label vezan. Svaka forma mora imati rolu form.
<div class="container">
<h2>Prijava</h2>
<form role="form">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Zapamti me</label>
</div>
<button type="submit" class="btn btn-default">Posalji</button>
</form>
</div>
Slika 10: Izgled forme za prijavu na Desktop ra
Slika 11: Izgled forme za prijavu
btn-danger, btn-primary, btn-warning, btn-success, btn-info i btn-default.
Ukoliko zamenimo u formi za prijavu klasu dugmeta iz btn-default u btn-
dropdown-toggle. Klasa caret predstavlja malu strelicu ka dole.
Primer:
<div class="btn-group">
<button type="button" class="btn btn-success">Posalji</button>
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
<span class="caret"></span>
<span class="sr-only">Opcije</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
</ul>
</div>
Bootstrap tabele
Kako bi dobili lepo dizajniranu bootstrap tabelu sve klasu table.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Primer</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Normalna tabela</h2>
<p>Table klasa se koristi u Bootstrap-u za dobijanje Bootstrap tabele</p>
<table class="table">
<thead>
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mitar</td>
<td>Miric</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Jelena</td>
<td>Rozga</td>
<td>[email protected]</td>
</tr>
<tr>
<td>Severina</td>
<td>Vucetic</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Slika 15: Bootstrap normalna tabela
table table-bordered.
table table-striped.
-a
validan
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-
Unesite validnu email adresu
</div>
(Pagination) kod Bootstrap-a
Potrebno je da napravimo ui element sa klasom pagination i li elemente za stranice.
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
disabled active.
<nav>
<ul class="pagination">
<li>
<a href="#" aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#" aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
</ul>
</nav>
![[WinDays13] Web-dizajn je mrtav, živio responzivni web-dizajn!](https://img.dokumen.tips/doc/110x75/547ea0795806b5bd5e8b4685/windays13-web-dizajn-je-mrtav-zivio-responzivni-web-dizajn.jpg?t=1685584703)
