Formulários Responsivos com Bootstrap

1.907 visualizações

Publicada em

Apresentação utilizada na palestra "Formulários Responsivos com Bootstrap" do Encodev (http://encodev.com.br/).
Nesta apresentação mostrei como você pode utilizar o Boostrap para agilizar o desenvolvimento de um formulário totalmente responsivo e bem organizado.
Para ficar sabendo de novidades curta minha página no Facebook: https://www.facebook.com/tutoriaismilanoweb

Publicada em: Internet
0 comentários
3 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.907
No SlideShare
0
A partir de incorporações
0
Número de incorporações
804
Ações
Compartilhamentos
0
Downloads
42
Comentários
0
Gostaram
3
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Formulários Responsivos com Bootstrap

  1. 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. 2. Bootstrap Uma Ótima Solução ou Engessamento do layout?
  3. 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. 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. 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. 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. 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. 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. 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. 10. Uma Grid, vários tamanhos .col-xs-* .col-sm-* .col-md-* .col-lg-* Celulares Tablets Desktops Monitores Maiores
  11. 11. Parte 2 Começando com o Bootstrap
  12. 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. 13. Formulário Básico em Bootstrap
  14. 14. Formulário Básico em Bootstrap
  15. 15. Formulário Básico em Bootstrap
  16. 16. Bootstrap Uma mão na roda!
  17. 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

×