Conceito básicos de layout de páginas usando a framework bootstrap.

1. HTML5 e CSS3
Web Design

2. HTML5 e CSS3
Unidades de medidas CSS
1. Unidades de medidas de distância, comprimento <length>
Medidas relativas
Para fontes: unidades em, ex, ch, rem
Porcentagem da viewport: unidades vw, vh, vmin, vmax
Medidas absolutas
Unidades cm, mm, q, in, pt, pc, px

3. HTML5 e CSS3
A especificação do W3C classifica
tecnicamente a porcentagem (%)
como tipo de dado e não unidade
de medida.

4. HTML5 e CSS3
Unidades de medidas CSS
Unidades de medidas para outras quantidades
Outras quantidades
Ângulos: unidades: deg, grad, rad, turn
Duração: unidades s, ms
Frequência: unidades Hz, kHz
Resolução: unidades dpi, dpcm, dppx

5. HTML5 e CSS3
Objetivo da atividade
Criar botões padronizados para uma aplicação web

6. HTML5 e CSS3
Código .html

7. HTML5 e CSS3
Código .html

8. HTML5 e CSS3
Código .css

9. HTML5 e CSS3
Código .css

10. HTML5 e CSS3
Código .css
Essa declaração equivale a seguinte

11. HTML5 e CSS3
Código .css

12. HTML5 e CSS3

13. HTML5 e CSS3
Bootstrap
Woratana
Ngarmtrakulchol
Fundador da
Designil.com

14. HTML5 e CSS3
Bootstrap é uma framework de front-end
baseada em HTML, CSS e JS
Uma framework para todos os dispositivos

15. HTML5 e CSS3
Bootstrap possui extensa documentação
e dezenas de componentes HTML e CSS

16. HTML5 e CSS3
Feitos usando Bootstrap

17. HTML5 e CSS3
Feitos usando Bootstrap

18. HTML5 e CSS3
Feitos usando Bootstrap

19. HTML5 e CSS3
Feitos usando Bootstrap

20. HTML5 e CSS3
Temos oficiais dos criadores do Bootstrap

21. HTML5 e CSS3 Documentação fácil

22. HTML5 e CSS3 Cabeçalho

23. HTML5 e CSS3
Ícones

24. HTML5 e CSS3
Ícones - exemplos

25. HTML5 e CSS3
Ícones - exemplos

26. HTML5 e CSS3 Botões

27. HTML5 e CSS3
Criando o ambiente de desenvolvimento

28. HTML5 e CSS3
Criando a estrutura do projeto

29. HTML5 e CSS3
Arquivo HTML

30. HTML5 e CSS3
Cabeçalho da página

31. HTML5 e CSS3
Exemplo de navegação

32. HTML5 e CSS3
Conteúdo principal da página

33. HTML5 e CSS3
Formulário

34. HTML5 e CSS3
Grid System
Funciona como uma espécie de tabela
abstrata, e é responsivo (responsive),
orientado a dispositivos móveis (mobile
first) e se ajusta de acordo com a tela
(fluid), quando ela muda de tamanho ou
de orientação.

35. HTML5 e CSS3
Mobile First
O Bootstrap é Mobile First
Assume que a tela é de um
dispositivo móvel
Depois verifica o tamanho real
da tela

36. HTML5 e CSS3
Container
Existe o conceito de container
O container é uma div, que garante
que o seu layout vai ficar alinhado na
página, e com margens para as
laterais.

37. HTML5 e CSS3
Container
Em Celulares Em Tablets Desktops Telas Grandes
Largura Automática Largura Máx. de 750px Largura Máx. de 970px Largura Máx. de 1170px

38. HTML5 e CSS3
Container
/* Desktops e notebooks */
@media (min-width: 1200px) { }
/* Tablets e notebooks */
@media (min-width: 992px) and (max-width: 1199px) { }
/* Tablets e netbooks */
@media (min-width: 768px) and (max-width: 991px) { }
/* Grandes celulares e pequenos tables */
@media (max-width: 767px) { }
/* Maioria dos celulares */
@media (max-width: 480px) { }

39. HTML5 e CSS3
Container de tamanho fixo
<div class"container">
...
</div>

40. HTML5 e CSS3
Container de tamanho automático
<div class"container-fluid">
...
</div>

41. HTML5 e CSS3
Layout - horizontal
<div class"container">
<div class="row">
...
</div>
</div>

42. HTML5 e CSS3
Layout - horizontal
<div class"container">
<div class="row">
<div class="col-md-6"> </div>
<div class="col-md-6"> </div>
</div>
</div>

43. HTML5 e CSS3
Bootstrap Grid

44. HTML5 e CSS3
Layout simples

45. HTML5 e CSS3
Two-Column Layout

46. HTML5 e CSS3
francisco.soares@ifam.edu.br