Introdução ao Bootstrap 3

Transcript

1. 1 B
2. Breno Polanski Front End Software Engineer Meteorite.bi @brenopolanski 2 B
4. 4 cghackspace.org
5. O que é Bootstrap ? 5 B
6. Introdução Bootstrap é o mais popular framework JavaScript, HTML e CSS para desenvolvimento de sites e aplicações web responsivas utilizando o conceito de mobile first. 6 B
8. Introdução → Framework Um conjunto de ferramentas, conceitos ou códigos usado para resolver um problema de um domínio específico. 8 B
9. 9 B
10. Introdução Torna o desenvolvimento front-end muito mais rápido e fácil. 10 B
12. CSS → 120 kB (±) JS → 36 kB (±) 12 B
13. Por que usar Bootstrap ? 13 B
14. 14 ? ? ? ? ? ?
15. Vantagens • Possui documentação detalhada e de fácil entendimento; 15 B
16. 16 getbootstrap.com
17. Vantagens • Possui documentação detalhada e de fácil entendimento; 17 B • É otimizado para o desenvolvimento de layouts responsivos;
19. Vantagens • Possui documentação detalhada e de fácil entendimento; 19 B • É otimizado para o desenvolvimento de layouts responsivos; • Possui componentes suficientes para o desenvolvimento de qualquer site ou sistema web com interface simples; • Facilita a criação e edição de layouts por manter padrões; • Funciona em todos os navegadores atuais.
21. Desvantagens 21 B • Seu código terá de seguir os “padrões de desenvolvimento Bootstrap”; • Tema padrão do Bootstrap (caso não faça ajustes visuais, seu projeto se parecerá com outros que também utilizam o Bootstrap).
22. Tecnologias que fazem parte do Bootstrap 22 B
23. 23 B
24. Sites que usam Bootstrap 24 B
25. 25 nasa.gov
26. 26 fifa.com
27. 27 powerbi.microsoft.com
28. 28 washington.edu
29. Componentes CSS e JS 29 B
30. CSS → Grid 30 B
31. O grid determina a posição de cada elemento 31 B
32. O grid é usado para construir layouts 32 B
36. 36 B Grids responsivas
37. CSS → Tables 37 B
38. 38 B
39. CSS → Forms 39 B
40. 40 B
41. CSS → Buttons 41 B
43. CSS → Images 43 B
44. 44 B
45. Componente → Glyphicons 45 B
47. <span class="glyphicon glyphicon-search" aria- hidden="true"></span> 47 B
48. Componente → Dropdown 48 B
50. Componente → Navbar 50 B
51. 51 B
52. Componente → Alerts 52 B
54. JS → Modal 54 B
55. 55 B
56. JS → Tabs 56 B
57. 57 B
58. JS → Tooltip 58 B
59. 59 B
60. 60 B
61. 61 B
62. 62 B
63. DEMO :) 63 B
65. Antes de tudo... ...configurar ambiente! 65
67. OBRIGADO ;) 67
68. 68 B Contatos Email: breno.polanski@gmail.com Twitter / Facebook / GitHub: @brenopolanski Whatsapp: (83) 9 8804-0299