O documento apresenta o framework Bootstrap, descrevendo sua história, conceito, estrutura, grids, layouts fixo e fluido, viewport, ícones e informações sobre o crescente acesso a sites via dispositivos móveis. O Bootstrap foi desenvolvido para facilitar a criação de sites e aplicativos web, utilizando classes CSS e funções JavaScript. Foi criado por desenvolvedores do Twitter para padronizar o design interno e compartilhá-lo.

2. Apresentação
Ramon Sousa
Web Design (UCB)
Governo do Estado do Rio de Janeiro
Desenvolver Layout Para Sistemas
Web
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

3. Bootstrap – História e Apresentação
Origem do Nome
“Derivado de Bootstrapping – Palavra de origem inglesa que surgiu na década de
1880 e fazia referência a um acessório utilizado para calçar botas.
Com o passar dos anos foi adquirindo vários significados, tendo o mais comum à
realização de um processo sem ajuda externa, mas com etapas de facilitação interna. “
Wikipedia
O que é?
Bootstrap é um Framework Front-End que foi desenvolvido para facilitar a criação de
sites e aplicações web. É basicamente uma biblioteca – cheia de classes - para CSS,
assim como é o JQuery - cheio de funções – para o JavaScript.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

4. Bootstrap – História e Apresentação
Origem do Nome
“Derivado de Bootstrapping – Palavra de origem inglesa que surgiu na década de
1880 e fazia referência a um acessório utilizado para calçar botas.
Com o passar dos anos foi adquirindo vários significados, tendo o mais comum à
realização de um processo sem ajuda externa, mas com etapas de facilitação interna. “
Wikipedia
O que é?
Bootstrap é um Framework Front-End que foi desenvolvido para facilitar a criação de
sites e aplicações web. É basicamente uma biblioteca – cheia de classes - para CSS,
assim como é o JQuery - cheio de funções – para o JavaScript.
•Enquadra-se nos padrões
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

5. Bootstrap – História e Apresentação
Origem do Nome
“Derivado de Bootstrapping – Palavra de origem inglesa que surgiu na década de
1880 e fazia referência a um acessório utilizado para calçar botas.
Com o passar dos anos foi adquirindo vários significados, tendo o mais comum à
realização de um processo sem ajuda externa, mas com etapas de facilitação interna. “
Wikipedia
O que é?
Bootstrap é um Framework Front-End que foi desenvolvido para facilitar a criação de
sites e aplicações web. É basicamente uma biblioteca – cheia de classes - para CSS,
assim como é o JQuery - cheio de funções – para o JavaScript.
•Enquadra-se nos padrões
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
•Escrito em

6. Bootstrap – História e Apresentação
Origem do Nome
“Derivado de Bootstrapping – Palavra de origem inglesa que surgiu na década de
1880 e fazia referência a um acessório utilizado para calçar botas.
Com o passar dos anos foi adquirindo vários significados, tendo o mais comum à
realização de um processo sem ajuda externa, mas com etapas de facilitação interna. “
Wikipedia
O que é?
Bootstrap é um Framework Front-End que foi desenvolvido para facilitar a criação de
sites e aplicações web. É basicamente uma biblioteca – cheia de classes - para CSS,
assim como é o JQuery - cheio de funções – para o JavaScript.
•Enquadra-se nos padrões
•Escrito em
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

7. Bootstrap – História e Apresentação
Origem do Nome
“Derivado de Bootstrapping – Palavra de origem inglesa que surgiu na década de
1880 e fazia referência a um acessório utilizado para calçar botas.
Com o passar dos anos foi adquirindo vários significados, tendo o mais comum à
realização de um processo sem ajuda externa, mas com etapas de facilitação interna. “
Wikipedia
O que é?
Bootstrap é um Framework Front-End que foi desenvolvido para facilitar a criação de
sites e aplicações web. É basicamente uma biblioteca – cheia de classes - para CSS,
assim como é o JQuery - cheio de funções – para o JavaScript.
•Enquadra-se nos padrões
•Escrito em
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

8. Bootstrap – História e Apresentação
Criação
Foi desenvolvido por 2 funcionários do – e no – Twitter (por isso o nome Twitter
Bootstrap) como uma quadro de ferramenta interna. Após foi formado um grupo de
desenvolvedores que viram a oportunidade de fazer algo mais robusto do que uma
simples ferramenta de uso interno. A ideia era reinventar e compartilhar um novo
padrão de design.
Compatibilidade (Navegadores)
Bootstrap é compatível com as versões mais atuais dos navegadores.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

9. Bootstrap – História e Apresentação
Criação
Foi desenvolvido por 2 funcionários do – e no – Twitter (por isso o nome Twitter
Bootstrap) como uma quadro de ferramenta interna. Após foi formado um grupo de
desenvolvedores que viram a oportunidade de fazer algo mais robusto do que uma
simples ferramenta de uso interno. A ideia era reinventar e compartilhar um novo
padrão de design.
Compatibilidade (Navegadores)
Bootstrap é compatível com as versões mais atuais dos navegadores.
OU SEJA...
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

10. Bootstrap – História e Apresentação
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

11. Bootstrap – História e Apresentação
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

12. Bootstrap – Pontos Positivos
Documentação
Sua documentação encontra-se disponível em português - graças a profissionais do
Globo.com – em:
http://globocom.github.io/bootstrap/
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

13. Bootstrap – Pontos Positivos
Documentação
Sua documentação encontra-se disponível em português - graças a profissionais do
Globo.com – em:
http://globocom.github.io/bootstrap/
Possui Responsive Design (A partir da versão 2.0)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

14. Bootstrap – Pontos Positivos
Código
Fácil criação ou edição do código, contanto que se tenha conhecimento
(mesmo que básio) em HTML 5, CSS e JavaScript (JQuery).
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

15. Bootstrap – Pontos “Negativos”
Padrão Visual Bootstrap
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

16. Bootstrap – Pontos “Negativos”
Padrão Visual Bootstrap
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

17. Bootstrap – Pontos “Negativos”
Padrão Visual Bootstrap
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

18. Bootstrap – Estrutura
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Arquivos e Pastas

19. Bootstrap – Grids
Guias para distribuir os elementos da página em um
Formato.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
12 Colunas

20. Bootstrap – Layout Fixo e Fluído
Podemos trabalhar com layout fixo ou fluído. O layout fixo é
configurado no CSS em pixel e o fluído em porcentagem.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

21. Bootstrap – Layout Fixo e Fluído
Podemos trabalhar com layout fixo ou fluído. O layout fixo é
configurado no CSS em pixel e o fluído em porcentagem.
Fixo Fluído
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

22. Bootstrap – ViewPort
A visualização com o layout menor que 768px.
Largura (tela) de 768px ou maior
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

23. Bootstrap – ViewPort
A visualização com o layout menor que 768px.
Largura (tela) de 768px ou maior Largura (tela) menor que 768px
A Utilização do Bootstrap Para a Otimização de Páginas –– Por Ramon Sousa

24. Bootstrap – Ícones
Os ícones no Bootstrap estão disponíveis em forma de
sprite e são utilizados através da fonte glyphicons-halflings-regular.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

25. Bootstrap – Ícones
Existem outras fontes de ícones, como por exemplo, a
Font-Awesome. (http://fortawesome.github.io/Font-Awesome/icons/)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

26. Bootstrap – Informações Relevantes
Segundo dados da consultoria Conversion, uso de
aparelhos portáteis para acesso ao varejo eletrênico
cresceu 200% no Brasil em um ano.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

27. Bootstrap – Informações Relevantes
Segundo dados da consultoria Conversion, uso de
aparelhos portáteis para acesso ao varejo eletrênico
cresceu 200% no Brasil em um ano.
• Google anuncia priorizar sites orientados para celulares e tablets nos
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
resultados orgânicos;

28. Bootstrap – Informações Relevantes
Segundo dados da consultoria Conversion, uso de
aparelhos portáteis para acesso ao varejo eletrênico
cresceu 200% no Brasil em um ano.
• Google anuncia priorizar sites orientados para celulares e tablets nos
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
resultados orgânicos;
• As empresas brasileiras deverão reestruturar seus sites para contemplar
esse crescente acesso via dispositivos móveis;

29. Bootstrap – Informações Relevantes
Segundo dados da consultoria Conversion, uso de
aparelhos portáteis para acesso ao varejo eletrênico
cresceu 200% no Brasil em um ano.
• Google anuncia priorizar sites orientados para celulares e tablets nos
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
resultados orgânicos;
• As empresas brasileiras deverão reestruturar seus sites para contemplar
esse crescente acesso via dispositivos móveis;
• 20% dos acessos a e-commerce são feitos por dispositivos móveis, porém
só 10% concretizam a compra;

30. Bootstrap – Informações Relevantes
Segundo dados da consultoria Conversion, uso de
aparelhos portáteis para acesso ao varejo eletrênico
cresceu 200% no Brasil em um ano.
• Google anuncia priorizar sites orientados para celulares e tablets nos
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
resultados orgânicos;
• As empresas brasileiras deverão reestruturar seus sites para contemplar
esse crescente acesso via dispositivos móveis;
• 20% dos acessos a e-commerce são feitos por dispositivos móveis, porém
só 10% concretizam a compra;
• O hábito do consumidor mudou e o celular é um dos principais canais de
acesso à internet no Brasil;

31. Bootstrap – Informações Relevantes
Segundo dados da consultoria Conversion, uso de
aparelhos portáteis para acesso ao varejo eletrênico
cresceu 200% no Brasil em um ano.
• Google anuncia priorizar sites orientados para celulares e tablets nos
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
resultados orgânicos;
• As empresas brasileiras deverão reestruturar seus sites para contemplar
esse crescente acesso via dispositivos móveis;
• 20% dos acessos a e-commerce são feitos por dispositivos móveis, porém
só 10% concretizam a compra;
• O hábito do consumidor mudou e o celular é um dos principais canais de
acesso à internet no Brasil e 61% se mostram insatisfeitos com a página;
• A maioria dos sites não está preparada para gerar uma boa experiência com
o consumidor.
Fonte: http://revistaw.com.br/blog/atualizacao-do-google-forca-lojas-virtuais-a-investirem-em-design-responsivo/
Em10/10/2014

32. Bootstrap – E-Commerce Responsivo
Ponto Frio
Home Menu Produtos - Home
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

33. Bootstrap – E-Commerce Responsivo
Ponto Frio
Telefones e Celulares Smartphones Produto
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

34. Bootstrap – Download
Faça o download do Bootstrap versão 2.2.2 no link
http://globocom.github.io/bootstrap/. Sugiro que faça o
download da versão da Globo.com pois todo o site assim
com a documentação estão traduzido para português.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

35. Bootstrap – Download
Em contra partida, a versão da Globo.com encontra-se
desatualizada se comparada a versão original do Bootstrap,
que é a 3.2.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

36. Bootstrap – Criando a index.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

37. Bootstrap – Estrutura HTML5
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

38. Bootstrap – Divisões e Classes
Independente da quantidade de colunas (grids) utilizadas,
estas sempre serão dependente de uma linha (.row ou
.row-fluid).
As classes span (.span4) define a quantidade de colunas
que sua <div> terá.
Exemplo de layout fixo
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

39. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo

40. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo

41. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo

42. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo

43. Bootstrap – Divisões e Classes
Cada coluna do Bootstrap possui 70px de largura.
Cada espaçamento entre essas colunas contem 30px de
largura.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

44. Bootstrap – Divisões e Classes
Cada coluna do Bootstrap possui 70px de largura.
Cada espaçamento entre essas colunas contem 30px de
largura.
Vamos fazer uma continha rápida?
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

45. Bootstrap – Divisões e Classes
Na primeira <div> foram utilizados 8 colunas (.span8).
Colunas = (8*70px=560px) | Espaços = (7*30=210px)
Total = (560px+210px=770px)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

46. Bootstrap – Divisões e Classes
Na primeira <div> foram utilizados 8 colunas (.span8).
Colunas = (8*70px=560px) | Espaços = (7*30=210px)
Total = (560px+210px=770px)
Na segunda <div> foram utilizados 4 colunas (.span4).
Colunas = (4*70px=280px) | Espaços = (3*30=90px)
Total = (280px+90px=370px)
SOMA GERAL = (770px+370px=1140px)
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

47. Bootstrap – Divisões e Classes
Lembra que o layout fixo não pode ultrapassar 940px?
Fixo
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

48. Bootstrap – Divisões e Classes
Acima de 940px, temos que fazer uso do layout fluído
acrescentando o comando “-fluid” em nossas classes.
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

49. Bootstrap – Divisões e Classes
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa
Exemplo

50. Bootstrap – Customização
Alguns exemplos padrão de customização do Bootstrap
Link: http://globocom.github.io/bootstrap/base-css.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

51. Bootstrap – Customização
Alguns exemplos padrão de customização do Bootstrap
Link: http://globocom.github.io/bootstrap/base-css.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

52. Bootstrap – Customização
Alguns exemplos padrão de customização do Bootstrap
Link: http://globocom.github.io/bootstrap/base-css.html
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

53. Bootstrap – Templates
Bootstrap Stage - bootstrapstage.com
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

54. Bootstrap – Templates
Bootbundle - bootbundle.com
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

55. Bootstrap – Templates
Bootswatch - bootswatch.com
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

56. Bootstrap – Bibliografia
Fontes
Bootstrap Globo.com - http://globocom.github.io/bootstrap/
Ponto Canal - https://www.youtube.com/channel/UCQjVM9M1rvPjiidoqTQ0z8g
SlideShare – Introdução ao Bootstrap, Desenvolvendo com
Bootstrap e Interface Responsiva.
Revista W – http://www.revistaw.com.br
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa

57. Bootstrap – Contatos Ramon Sousa
fb.com/ramonsousaa
twitter.com/rmn_sousa
linkedin.com/in/ramonsousa
plus.google.com/+RamonSousaWeb
“Pouco conhecimento faz com que as pessoas se sintam
orgulhosas. Muito conhecimento, que se sintam mais humildes.”
Leonardo Da Vinci
A Utilização do Bootstrap Para a Otimização de Páginas – Por Ramon Sousa