BOOTSTAP 4 TUDO O QUE VOCÊ PRECISA SABER

Transcript

1. BOOTSTAP 4 TUDO O QUE VOCÊ PRECISA SABER
2. TAÍS REIS Desenvolvedora web à 5 anos Full Stack na Webhub Apaixonada por códigos PHPWomen @taisreis67
3. 1. O QUE É?
4. O BOOTSTRAP O Bootstrap é um framework para o Desenvolvimento com HTML, CSS e JS. ▸ Criado pelo Twitter ▸ Open source ▸ Responsivo ▸ Mobile-first ▸ Grids 12 ▸ v4.0 beta
5. 2. MUDANÇA DE VERSÃO
6. BEM VINDO A VERSÃO 4 BETA A versão 4 do Bootstrap é uma das maiores reescritas do projeto. ▸ Retirada do LESS ▸ Retirado do Bower ▸ Suporte IE10 e IOS7 ▸ Suporte Android 5 ▸ Flexbox já habilitado - ▸ Mudança de 'px' para 'rem' ▸ font-size de 14px para 16px ▸ ‘-xs’ removido ▸ Retirada do Glyphicons ▸ Componentes refatorados
7. 3. POR ONDE COMEÇAR?
8. ADICIONANDO O BOOTSTRAP O Bootstrap pode ser adicionado de duas formas: ▸ Adicionando os CDN do Bootstrap ao seu projeto. ▸ Baixando os arquivos já compilados ▸ Baixando o código fonte ▸ Instalando pelo npm
9. O GRID Entender o sistema de grids é a base para que você possa encaixar o seu projeto nos padrões de responsividade do Bootstrap. ▸ Container e container-fluid ▸ Breakpoints ▸ Linhas e colunas ▸ Flexbox
10. ELEMENTOS Na documentação do Bootstrap você encontra seus elementos agrupados em 4 grandes grupos: - Layout: grid, media queries e utilidades do layout. - Content: fontes, imagens, tabelas, figuras e etc. - Components: botões, navbars, modals e etc. - Utilities: border-radius, colors, floats e etc.
12. 4. PONTOS NEGATIVOS
13. PORQUE NÃO USAR ▸ Contém muitas coisas que você vai carregar mas, não vai utilizar. ▸ É baseado em classes tornando difícil a semântica do seu código. ▸ Pode ser difícil de entender e também de modificar. ▸ Seu aplicativo vai ficar com a carinha “fui feito em Bootstrap” ▸ O seu design pode não se encaixar no padrão “Bootstrap de ser”.
14. 5. PONTOS POSITIVOS
15. PORQUE DEVO USAR ▸ Rapidez para iniciar um projeto. ▸ Responsivo. ▸ Mobile-first. ▸ Sem choro para formulários. ▸ Muito completo ▸ A cada versão ele vem melhorando a forma de como podemos adaptá-lo e também ficando menos pesado. ▸ Você vai aprender muito com ele.
16. 6. BONUS
18. ▸ http://getbootstrap.com/ ▸ https://foundation.zurb.com/ ▸ http://www.livrosdomaujor.com.br/bootstrap3/c odigos.html ▸ http://www.fullstackradio.com/29 ▸ https://css-tricks.com/snippets/css/a-guide-to -flexbox/ REFERÊNCIAS
19. THANKS! Perguntas? Você pode me encontrar com @taisreis67