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