Aula Bootstrap.pptx
- 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.
- 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.
- 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.
- 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”