Introdução a Bootstrap 3
Transferir como PPSX, PDF8 gostaram4,314 visualizações
O documento apresenta o framework Bootstrap, explicando como ele pode facilitar o desenvolvimento ágil de sites. Apresenta os principais recursos como grids, formulários e tabelas responsivas. Fornece instruções passo a passo de como configurar um projeto com Bootstrap, incluindo links para a documentação oficial.
![[B]
Bootstrap é o mais popular framework HTML, CSS, JS
para desenvolvimento ágil.](https://image.slidesharecdn.com/bootstrap-140711233619-phpapp02/85/Introducao-a-Bootstrap-3-2-320.jpg)
Introdução a 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