Guia pra instalação e utilização do bootstrap 3.

1. Bootstrap 3
E como salvará sua vida
Iago Effting iago.effting@gmail.com

2. [B]
Bootstrap é o mais popular framework HTML, CSS, JS
para desenvolvimento ágil.

3. Por que Utilizar?
# Texto Sem Bootstrap

4. Por que Utilizar?
# Texto Com Bootstrap

5. Por que Utilizar?
# Table Sem Bootstrap

6. Por que Utilizar?
# Table Com Bootstrap

7. Por que Utilizar?
# Form Sem Bootstrap

8. Por que Utilizar?
# Form Com Bootstrap

9. Por onde começar?
Acesse o Site:
http://getbootstrap.com

10. Por onde começar?
Acesse o Site:
http://getbootstrap.com
Encontre o Botão Download e Clique

11. Por onde começar?
Acesse o Site:
http://getbootstrap.com
Encontre o Botão Download e Clique
Clique em Download Bootstrap

12. Por onde começar?
Acesse o Site:
http://getbootstrap.com
Encontre o Botão Download e Clique
Clique em Download Bootstrap

13. Mas o que ele é?
Recursos HTML, CSS e Javascript

14. Mas o que ele é?
Recursos HTML, CSS e JavaScript

15. Configurando Projeto
Abra o Arquivo baixado (bootstrap-3.2.0.zip);

16. Configurando Projeto
Abra o Arquivo baixado (bootstrap-3.2.0.zip);
Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);

17. Configurando Projeto
Abra o Arquivo baixado (bootstrap-3.2.0.zip);
Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);
Renomeio a pasta bootstrap-3.2.0-dist para public;

18. Configurando Projeto
Abra o Arquivo baixado (bootstrap-3.2.0.zip);
Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);
Renomeio a pasta bootstrap-3.2.0-dist para public;
Crie um arquivo index.html na raiz do projeto;

19. Configurando Projeto
Abra o Arquivo baixado (bootstrap-3.2.0.zip);
Extraia para o seu projeto (vai extrair uma pasta bootstrap-3.2.0-dist);
Renomeio a pasta bootstrap-3.2.0-dist para public;
Crie um arquivo index.html na raiz do projeto;
Você agora terá essa estrutura em seu projeto:

20. Configurando index
Abra o Arquivo index.hmtl do seu root do projeto;

21. Configurando index
Abra o Arquivo index.hmtl do seu root do projeto;
Acesse http://goo.gl/yfil6c e copie o Basic Template;

22. Configurando index
Abra o Arquivo index.hmtl do seu root do projeto;
Acesse http://goo.gl/yfil6c e copie o Basic Template;
Agora dentro do arquivo index.html cole o Basic
Template:
Como ficou o meu: http://goo.gl/7RnnyF

23. Lang
É o idioma que o Site vai ser indexado pelos
sistemas de busca. Vamos trocar para pt-br:

24. Viewport
Meio de padronizar a exibição de telas em px, como Tablets,
celulares, monitores, etc.
Em Initial Scale, padronizamos a escala para 1 em todos os
dispositivos.

25. Link
Chamada do arquivo CSS do Bootstrap:

26. Link
Chamada do arquivo CSS do Bootstrap:
O arquivo bootstrap se encontra em nosso diretório public,
vamos por ali também:

27. Script
Chamada de arquivos de Script do Bootstrap, nesse caso ele
chama um Javascript externo:

28. Script
Chamada de arquivos de Script do Bootstrap, nesse caso ele
chama um Javascript externo:
Vamos deixar esse igual e alterar o seguinte, colocando
apenas o public no inicio da linha:

29. Configurado!!
Ao acessar o arquivo pelo navegador, você verá que está
diferente o visual, igual a esse:

30. Use a Documentação!!
Use sempre a documentação:
Acesse http://getbootstrap.com

31. Container
Bootstrap precisa de um elemento que envolva o site para
abrigar o sistema de Grid.
Acesse http://getbootstrap.com/css/#overview-container

32. Sistema de Grid
O container que envolve o grid é dividido em 12 colunas,
podendo assim manipular facilmente cada parte do site:
http://getbootstrap.com/css/#grid

33. Bonus Stage!
Veja como Criar um Site responsivo
https://www.youtube.com/watch?v=BMhIBVSEFvc
Tableless (Responsivo na pratica do rascunho ao digita)
http://goo.gl/WxED7R

34. Código Fonte
http://goo.gl/P5DnTD
Iago Effting iago.effting@gmail.com