O documento apresenta uma palestra sobre o framework Bootstrap, incluindo: 1) Uma breve introdução sobre o palestrante Walace Felix e o propósito do evento Nerdzão Day 2) Uma explicação do que é o Bootstrap, como surgiu no Twitter e suas principais versões 3) Demonstração de recursos do Bootstrap como grids, breakpoints, tipografia e componentes como cards e menus

1. Bootstrap#nerdzaoday 1

2. Bootstrap#nerdzaoday 2
Contato:
walace.felix.1
walacefex
walacefex
walacefelix.com
Bem-vindos ao Nerdzão Day
Walace Felix - Sou desenvolvedor
Front-end e CEO de uma agência
de Marketing e Publicidade.
"Lutem e lutem novamente, até
cordeiros virarem leões"

3. Bootstrap#nerdzaoday 3
Bootstrap é um framework de
desenvolvimento front-end, ele
é uma ferramenta para auxiliar
o desenvolvedor a começar, o
seu sistema, aplicativo ou site.
O Bootstrap é composto por
com HTML, CSS e
Javascript(jquery biblioteca), ele
é um framework de código
aberto.
Hoje vamos falar sobre
(Twitter) Bootstrap salvando
vidas! Alguém aqui usou, ouviu
falar, mexeu ou algo assim?

4. Bootstrap#nerdzaoday 4
O bootstrap era um projeto interno
do twitter que foi criado com o
propósito de ajudar a galera de
desenvolvimento e designer do
próprio Twitter, a galera (devs e
designer). Twitter blueprint
Mas quem criou e como se
originalizou esse framework
mais famosos do mundo?

5. Bootstrap#nerdzaoday 5
2010
Timeline do
Bootstrap
Eis que surge a primeira
versão do Twitter blueprint
2011
Bootstrap 1
código aberto

6. Bootstrap#nerdzaoday 6
2012
Timeline do
Bootstrap
2013
Bootstrap 2
Sistema Grid layout de 12
colunas e componentes para
designer responsivo
Bootstrap 3
Conceito de mobile first
e Flat Design

7. Bootstrap#nerdzaoday 7
2014(alpha) - 2016
Timeline do
Bootstrap
Bootstrap 4
Agora na versão atual passou
adotar o Sass migrou do Less
para utilização do Sass e
colocou o mais novo atributo
do CSS o Flexbox.

8. Bootstrap#nerdzaoday 8
Como utilizar/instalar o Bootstrap?
Download Compilado
CSS e JS, falta
dependências
JavaScript(JQuery e
Popper.js
Arquivos Fontes
SASS e JS, falta
dependências do
JavaScript(JQuery e
Popper.js
CDN
CDN que é só
copiar o link e os
scripts que já estão
no CDN do próprio
Bootstrap.
Linha de Comando
Via NPM install
bootstrap
GEM install
bootstrap.

9. Bootstrap#nerdzaoday 9
SISTEMA DE GRIDS
basicamente é o que define o espaço vertical e horizontal
(unidades)
BREAKPOINTS
.COL .COL-SM .COL-MD .COL-LG .COL-XL
sm: 540px, md: 720px, lg: 960px, xl: 1140px

10. Bootstrap#nerdzaoday 10
BREAKPOINTS RESPONSIVO
.COL
.COL-SM
sm: 576px
.COL-MD
md: 768px
.COL-LG
lg: 992px
.COL-XL
xl: 1200px

11. Bootstrap#nerdzaoday 11
CONTAINERS
COMO UTILIZAR?
TIPOGRAFIA OS ATALHOS
PRONTOS
IMAGENS E BOTÕES
FLEXTABELASCARD
TIPOS DE MENUS
ACORDEÃO
VAMOS PARA PRÁTICA

12. Bootstrap#nerdzaoday 12
Contato:
walace.felix.1
walacefex
walacefex
walacefelix.com
Obrigado a todos e ao
Nerdzão Day
"Lutem e lutem novamente, até
cordeiros virarem leões"