web design responsivo - criando um site adaptável

35
WEB DESIGN RESPONSIVO – CRIANDO UM SITE ADAPTÁVEL

Upload: guto-xavier

Post on 12-Apr-2017

403 views

Category:

Internet


5 download

TRANSCRIPT

Page 1: Web design responsivo - Criando um site adaptável

WEB DESIGN RESPONSIVO – CRIANDO UM SITE ADAPTÁVEL

Page 2: Web design responsivo - Criando um site adaptável

O QUE É WEB DESIGN RESPONSIVO?

Page 3: Web design responsivo - Criando um site adaptável

“Web Design Responsivo é uma abordagem destinada a elaborar sites para fornecer uma ótima experiência de visualização, fácil leitura e navegação com um mínimo de redimensionamento e visionamento, para uma ampla gama de dispositivos.

Page 4: Web design responsivo - Criando um site adaptável

BOOTSTRAPgetbootstrap.com

FOUNDATIONfoundation.zurb.com

SKELETONgetskeleton.com

Page 5: Web design responsivo - Criando um site adaptável

BOOTSTRAP

Page 6: Web design responsivo - Criando um site adaptável

“Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Page 7: Web design responsivo - Criando um site adaptável

1.Download do Bootstrap

Page 8: Web design responsivo - Criando um site adaptável

getbootstrap.com

Page 9: Web design responsivo - Criando um site adaptável

2.Escrevendo o HTML BÁSICO

Page 10: Web design responsivo - Criando um site adaptável
Page 11: Web design responsivo - Criando um site adaptável

3.Incluindo o CSS do Bootstrap

Page 12: Web design responsivo - Criando um site adaptável
Page 13: Web design responsivo - Criando um site adaptável

4.Incluir o jQuery

Page 15: Web design responsivo - Criando um site adaptável

5.Incluindo o JavaScript do Bootstrap

Page 16: Web design responsivo - Criando um site adaptável

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

Page 17: Web design responsivo - Criando um site adaptável

6.Adicionar suporte para IE8

Page 18: Web design responsivo - Criando um site adaptável

<!--[if lt IE 9]><script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script><script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script><![endif]-->

Page 19: Web design responsivo - Criando um site adaptável

7.Barra de Navegação

Page 20: Web design responsivo - Criando um site adaptável

<div class="navbar navbar-default navbar-static-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="http://mikspot.com/" title='Your choice, your world!'>Home</a> </div> <div class="navbar-collapse collapse"> <ul class="nav navbar-nav"> <li class="active"> <a href="#">All</a> </li> <li> <a href="#">Demo</a> </li> <li> <a href="#">Contact</a> </li> </ul> </div><!--/.nav-collapse --> </div></div>

Page 21: Web design responsivo - Criando um site adaptável

8.Adicionar um Container

Page 22: Web design responsivo - Criando um site adaptável

getbootstrap.com

Page 23: Web design responsivo - Criando um site adaptável

9.Adicionar um Título

Page 24: Web design responsivo - Criando um site adaptável

getbootstrap.com

Page 25: Web design responsivo - Criando um site adaptável

10.Criando uma Tabela

Page 26: Web design responsivo - Criando um site adaptável

getbootstrap.com

Page 27: Web design responsivo - Criando um site adaptável

11.Criando um Formulário

Page 28: Web design responsivo - Criando um site adaptável

getbootstrap.com

Page 29: Web design responsivo - Criando um site adaptável

12.Adicionando ícones no Botão

Page 30: Web design responsivo - Criando um site adaptável

getbootstrap.com

Page 31: Web design responsivo - Criando um site adaptável

13.Mensagens de Alerta

Page 32: Web design responsivo - Criando um site adaptável

getbootstrap.com

Page 33: Web design responsivo - Criando um site adaptável

14.Estilizando Imagens

Page 34: Web design responsivo - Criando um site adaptável

getbootstrap.com