O documento fornece instruções passo-a-passo para criar um site responsivo utilizando o framework Bootstrap, começando com a instalação do Bootstrap, adicionando HTML básico, CSS e JavaScript, e concluindo com a adição de elementos como barra de navegação, container, títulos, tabelas, formulários e imagens.

1. WEB DESIGN
RESPONSIVO –
CRIANDO UM SITE
ADAPTÁVEL

2. O QUE É WEB
DESIGN
RESPONSIVO?

3. “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.

4. BOOTSTRAP
getbootstrap.com
FOUNDATION
foundation.zurb.com
SKELETON
getskeleton.com

5. BOOTSTRAP

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

7. 1.
Download do
Bootstrap

8. getbootstrap.com

9. 2.
Escrevendo o
HTML BÁSICO

11. 3.
Incluindo o CSS
do Bootstrap

13. 4.
Incluir o jQuery

14. <script
src="https://ajax.googleapis.com/aj
ax/libs/jquery/1.11.0/jquery.min.js
"></script>

15. 5.
Incluindo o
JavaScript do
Bootstrap

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

17. 6.
Adicionar suporte
para IE8

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

19. 7.
Barra de
Navegação

20. <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>

21. 8.
Adicionar um
Container

22. getbootstrap.com

23. 9.
Adicionar um
Título

24. getbootstrap.com

25. 10.
Criando uma
Tabela

26. getbootstrap.com

27. 11.
Criando um
Formulário

28. getbootstrap.com

29. 12.
Adicionando
ícones no Botão

30. getbootstrap.com

31. 13.
Mensagens de
Alerta

32. getbootstrap.com

33. 14.
Estilizando
Imagens

34. getbootstrap.com

35. OBRIGADO!
Perguntas?
guto.rxavier@sp.senac.br
slideshare.net/gutoffline