Introdução a Bootstrap 3

2.260 visualizações

Publicada em

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

Publicada em: Internet
0 comentários
5 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
2.260
No SlideShare
0
A partir de incorporações
0
Número de incorporações
56
Ações
Compartilhamentos
0
Downloads
165
Comentários
0
Gostaram
5
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Introdução a Bootstrap 3

  1. 1. Bootstrap 3 E como salvará sua vida Iago Effting iago.effting@gmail.com
  2. 2. [B] Bootstrap é o mais popular framework HTML, CSS, JS para desenvolvimento ágil.
  3. 3. Por que Utilizar? # Texto Sem Bootstrap
  4. 4. Por que Utilizar? # Texto Com Bootstrap
  5. 5. Por que Utilizar? # Table Sem Bootstrap
  6. 6. Por que Utilizar? # Table Com Bootstrap
  7. 7. Por que Utilizar? # Form Sem Bootstrap
  8. 8. Por que Utilizar? # Form Com Bootstrap
  9. 9. Por onde começar? Acesse o Site: http://getbootstrap.com
  10. 10. Por onde começar? Acesse o Site: http://getbootstrap.com Encontre o Botão Download e Clique
  11. 11. Por onde começar? Acesse o Site: http://getbootstrap.com Encontre o Botão Download e Clique Clique em Download Bootstrap
  12. 12. Por onde começar? Acesse o Site: http://getbootstrap.com Encontre o Botão Download e Clique Clique em Download Bootstrap
  13. 13. Mas o que ele é? Recursos HTML, CSS e Javascript
  14. 14. Mas o que ele é? Recursos HTML, CSS e JavaScript
  15. 15. Configurando Projeto Abra o Arquivo baixado (bootstrap-3.2.0.zip);
  16. 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. 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. 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. 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. 20. Configurando index Abra o Arquivo index.hmtl do seu root do projeto;
  21. 21. Configurando index Abra o Arquivo index.hmtl do seu root do projeto; Acesse http://goo.gl/yfil6c e copie o Basic Template;
  22. 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. 23. Lang É o idioma que o Site vai ser indexado pelos sistemas de busca. Vamos trocar para pt-br:
  24. 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. 25. Link Chamada do arquivo CSS do Bootstrap:
  26. 26. Link Chamada do arquivo CSS do Bootstrap: O arquivo bootstrap se encontra em nosso diretório public, vamos por ali também:
  27. 27. Script Chamada de arquivos de Script do Bootstrap, nesse caso ele chama um Javascript externo:
  28. 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. 29. Configurado!! Ao acessar o arquivo pelo navegador, você verá que está diferente o visual, igual a esse:
  30. 30. Use a Documentação!! Use sempre a documentação: Acesse http://getbootstrap.com
  31. 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. 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. 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. 34. Código Fonte http://goo.gl/P5DnTD Iago Effting iago.effting@gmail.com

×