Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Formulários Responsivos com Bootstrap

3,613 views

Published on

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

Published in: Internet
  • Be the first to comment

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

×