Uma apresentação breve sobre Bootstrap.

1. BOOTSTRAP

2. FRAMEW
ORKSP
ARA
PR
OJET
O
S RESPONSIVOS
O web designresponsivotemcomo vantagem a habilidade de
mostrar umsite da maneira mais otimizada possível independente da
resolução ou dispositivo usado para visualizar.
Montar umwebsite responsivo pode ser umprocesso longo, mas hoje
emdia existemumaboa quantidade de frameworks – umaespécie
de esqueletoquevocêpode moldar àssuasnecessidades.Esses
frameworks visam facilitar a vida do web designer na hora de
programar umsite novo, pronto para funcionar em qualquer
resolução.

3. FRAMEW
ORKSP
ARAPR
OJET
O
S
RESPONSIVOS
Bootstrap
Skeleton
Foundation

4. Responsivo

6. BOO
T
ST
RAP
O Bootstrap é uma solução criada em 2010 por doisdesenvolvedores
do Twitter.Aintençãoera criar e disponibilizar umasoluçãopara
otimizar a produção de layouts responsivos para web.
O Bootstrap é umconjunto de propriedadesCSSe funções
JavaScript, que podemosimplementar seusrecursosemqualquer
página Web.
Parafazer o download vocêdeve acessarositedo Bootstrap –
getbootstrap.com. Você vai ver umbotão (Download Bootstrap) no
centro, e ao clicar você será direcionado para a área de downloads.

7. BOO
T
ST
RAP
O pacote do Bootstrap nada mais é
do que umarquivo .ZIP com vários
códigos CSSe JavaScript, prontos
para usarmosemum projeto.

8. BOO
T
ST
RAP
Temos uma estrutura de pastas como
esta:
JavaScript (plugins nativosdo
Bootstrap), JQuery

9. BOO
T
ST
RAP
A metatag de viewport faz o site ocupar todo o espaço disponível na
janela, tanto em celulares, como em tablets ou em PC’s.
Essaé a tag mais importante, e é ela que possibilita o design responsivo e
o mobile-first.
<meta name="viewport" content="width=device-width, initial-scale=1.0">

10. BOO
T
ST
RAP
Assimcomo vários outros frameworks front-end, o Bootstrap faz uso
de umgrid de 12 colunas.
Desde Agosto de 2013, quando foi lançada a versão 3, o Bootstrap
adotou a abordagem mobile first* e responsiva,oquesignifica que
suascolunasvão seadequando à tela quanto maior for sualargura
(progressive enhancement), ou seja, do mobile para o desktop;
diferente dasversõesanteriores, quando ascolunasseajustavam
quanto menor fosse a tela (graceful degradation), do desktop para o
mobile.
Penseem grid como uma planilha do Excel, onde você tem 12 colunas
e infinitas linhas para preencher com seuconteúdo.

11. BOO
T
ST
RAP– SIST
EMADEG
RIDS

12. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Todalinha, ourow,temqueestar dentro de umcontainer (classe
geralmenteaplicada a umaDIVpara determinar que ali vão conter
linhas que vão agrupar o layout) ou container-fluid. A diferença entre
asduasclasseséquea primeira éboxed, temlimite para a medida
daslaterais, e a segundaocupatodo espaçoda tela semmargens
laterais.

13. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Todacoluna,oucolumns,fica dentro de umarow/linha (queseguea
mesmalógica doscontainers,geralmente éutilizado umaDIVpara
empregar o papel de linha). As colunas agrupam conteúdo, então as
columnsdevemserosúnicoselementosfilho dentro de umarow.Você
pode ter problema de posicionamentode elementosseessaordem
não forrespeitada.

14. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Paracriar ocontainer,ascolunaseaslinhas,existemclassesCSSpré
definidas; geralmente utilizadas no elemento DIV, como as classes
.container ou .container-fluid, .row e .columns.
Existem espaçamentos entre as colunas, e entre o conteúdo dentro de
uma coluna.

15. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Paradeterminar qual o espaçoocupado por umacoluna,dentro do
limite de 12 colunas, utilizamosuma classe como essa .col-xs-12, que
determina que aquela coluna vai ocupar o espaço de 12 colunas só
pra ela, em dispositivos de tela pequena (smartphones).
Existemclassesespaciaispara determinar qual o espaço que
determinada colunavai ter emdiferentes tamanhosde tela. Repare
que a classe que indica o espaço ocupado é composta por três itens:
col, xs e umnúmero de 0 a 12, dependendo do seu limite de colunas.

16. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Classesde CSSespeciais
O Bootstrap tem quatro classes para larguras diferentes:
🢝xs (para mobile - telas menores que 768px)
🢝sm(para tablets- telas iguais ou maiores que 768px)
🢝md (para laptops pequenos - telas iguais ou maiores que 992px)
🢝lg (para laptops e desktops - telas iguais ou maiores que 1200px)
As classesacima podem ser combinadas para criar layouts mais
dinâmicos e flexíveis.

17. BOO
T
ST
RAP– SIST
EMADEG
RIDS
O parâmetro xs indica que essacoluna vai ocupar 12 colunas em
telas pequenas.
Além da medida xs utilizada para telas com até 768px de largura,
também temos as medidas sm,para telas com até 991px de largura,
mdpara telas até 1199px, e a lg para telas comnomínimo1200px
de largura.
Qualquer medida acima de 1200px assumeainda a configuração da
medida lg.

18. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Colunas(.col)devemestar dentro de linhas(.row) quepor suavez
devem estar dentro de um.container (largura fixa) ou .container-fluid
(largura total).
Colunas podem ser aninhadas (colunas dentro de colunas).
Colunas possuem respiros (espaços preenchimento entre elas) usando
padding.
Se mais de 12 colunas forem inseridas dentro de uma única linha, uma
nova linha abaixo da atual comportará as demais colunas.

19. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Small devices:
🢝Abaixo de 768 pixels ascolunassecomportam comolinhas.Ouseja,se odispositivo tiver
umatela pequenaéassimqueveremos nossas colunas: empilhadas. E,igual ou maior a
768 pixels (umSmartphonenaorientação “retrato”, por exemplo) temosascolunascomo
devemser, uma ao lado da outra.

20. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Medium devices:
🢝Aqui o breakpoint é de 992 pixels. Abaixo disso colunas são linhas e igual ou acima desse
valor elassecomportam comodeveriam. Tabletnaorientação paisagem, notebookse
desktopsentramnessa “categoria”.

21. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Large devices:
🢝Digamosquesuascolunascomportam grande quantidade de texto e/ou elementosem
nível de bloco grandes, de modo que o layout não pode “quebrar” em telas menores.
Com essa classe, cujo breakpoint é de 1200 pixels, você não deixa que isso aconteça.

22. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Extra small devices
🢝Independente do breakpoint, colunas com essa classe serão sempre… colunas. Sendo
assim, tanto no smartphone quanto no desktop as colunas aparecerão lado a lado.

23. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Podemoscombinar classes, tomemos umexemplo com 4 colunas iguais
(3 + 3 + 3 + 3 = 12).
Mas, digamos que essas4 colunas fiquem muito espremidas em telas
menores
Podemoster duas colunas (com 50% de largura cada) em telas iguais
ouacimade 768 pixels e também4 colunas(com25% de largura
cada) em telas iguais ou acima de 992 pixels.

24. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Combinando classes

25. BOO
T
ST
RAP– SIST
EMADEG
RIDS
Estrutura de HTML
🢝Cada coluna (col-*-*) deve estar contida em uma linha (row)
🢝Cada linha (row) deve estar contida em umDIV com a classe
“container”
🢝O container pode ser do tipo fixo (nada a ver com o layout estático)
ou fluido (nada a ver com o layout fluido)
🢝Por padrão o container é fixo. Se quiser o fluido, basta usar a
classe “container-fluid”

26. PRÓXIMA AU
LA
Prática comBootstrap