O documento discute o framework Bootstrap, explicando seu conceito de grid responsiva de 12 colunas para layouts adaptáveis a diferentes telas. Apresenta como o Bootstrap utiliza classes pré-definidas e media queries para ajustar automaticamente o layout em diferentes dispositivos.

1. Formulários Responsivos com Bootstrap
Rodrigo Ribeiro
• Webdesigner e Front End
• Sistemas Online de Gerenciamento de Clínicas
• Aplicações para Corretores de Seguros
• Sites institucionais
www.facebook.com/rodrigo.milano
br.linkedin.com/in/rodrigomilano

2. Bootstrap
Uma Ótima Solução
ou
Engessamento do layout?

3. O que é o Bootstrap
Bootstrap é o framework de HTML, CSS e JS mais
popular para se desenvolver projetos para web
responsivos e "mobile first"

4. Visão Geral
Mobile First
No Conceito Mobile First,
começa-se a se pensar o
conteúdo de um site
primeiramente para o celular,
depois para telas maiores.
A maior vantagem é que em
uma tela pequena, só se deve
mostrar as informações
essenciais, evitando poluir o
site.
Tablets
Desktops
Monitores Maiores
Celulares

5. O Sistema de Grid
O Conceito de layout baseado em Grid existe no
Design muito antes da Web.
O Bootstrap utiliza uma grid de 12
colunas.
Baseado neste conceito, você
escolhe o tamanho de um
elemento de acordo com o
número de colunas que ele terá.

6. A Grid do Bootstrap
Exemplo de um layout
Cabeçalho (12 colunas)
Área Lateral
(3 colunas)
Conteúdo Principal (9 colunas)
Rodapé (12 colunas)

7. A Grid do Bootstrap
Versão Mobile
Cabeçalho (12 colunas)
Área Lateral
(3 colunas)
Conteúdo Principal (9 colunas)
Rodapé (12 colunas)

8. A “Mágica” está nas Media Queries
E nas classes pré definidas do Bootstrap
.col-xs-*
.col-sm-*
.col-md-*
.col-lg-*
xs = Extra Small (< 768px)
sm = Small (≥768px)
md = Medium (≥992px)
lg = Large (≥1200px)

9. Media Queries
Criam uma condicional para um CSS especifico.
Se o dispositivo preenche determinadas condições, o CSS será aplicado.
body {
background: #FF0000;
}
@media (min-width: 768px) {
body {
background: #000000;
}
}
A partir de 768px, temos um fundo
preto
0 a 767px 768px e acima

10. Uma Grid, vários tamanhos
.col-xs-* .col-sm-* .col-md-* .col-lg-*
Celulares Tablets Desktops Monitores Maiores

11. Parte 2
Começando com o
Bootstrap

12. As Colunas da Grid
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>

13. Formulário Básico em Bootstrap

14. Formulário Básico em Bootstrap

15. Formulário Básico em Bootstrap

16. Bootstrap
Uma mão na roda!

17. Muito Obrigado
Rodrigo Ribeiro
• Webdesigner e Front End
• Sistemas Online de Gerenciamento de Clínicas
• Aplicações para Corretores de Seguros
• Sites institucionais
www.facebook.com/rodrigo.milano
br.linkedin.com/in/rodrigomilano