Formulários Responsivos com Bootstrap
Transferir como PPTX, PDF4 gostaram4,888 visualizações
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.
Formulários Responsivos com Bootstrap
- 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