O documento fornece uma introdução sobre o framework Bootstrap 4, descrevendo o que é Bootstrap, as principais mudanças da versão 4, como começar a usar Bootstrap e os principais pontos positivos e negativos de seu uso.

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