Formulrios Responsivos com Bootstrap

  • View
    543

  • Download
    1

Embed Size (px)

Text of Formulrios Responsivos com Bootstrap

Apresentando o Bootstrap

Formulrios Responsivos com BootstrapRodrigo Ribeiro

Webdesigner e Front EndSistemas Online de Gerenciamento de ClnicasAplicaes para Corretores de SegurosSites institucionais

www.facebook.com/rodrigo.milanobr.linkedin.com/in/rodrigomilano

BootstrapUma tima SoluoouEngessamento do layout?O que o BootstrapBootstrap o framework de HTML, CSS e JS mais popular para se desenvolver projetos para web responsivos e "mobile first"

Viso GeralMobile First

No Conceito Mobile First, comea-se a se pensar o contedo de um site primeiramente para o celular, depois para telas maiores.A maior vantagem que em uma tela pequena, s se deve mostrar as informaes essenciais, evitando poluir o site.TabletsDesktopsMonitores MaioresCelularesO Sistema de GridO 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 nmero de colunas que ele ter.

A Grid do BootstrapExemplo de um layoutCabealho (12 colunas)rea Lateral(3 colunas)Contedo Principal (9 colunas)Rodap (12 colunas)A Grid do BootstrapVerso MobileCabealho (12 colunas)rea Lateral(3 colunas)Contedo Principal (9 colunas)Rodap (12 colunas)A Mgica est nas Media QueriesE 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)

Media Queries Criam uma condicional para um CSS especifico.Se o dispositivo preenche determinadas condies, o CSS ser aplicado.

body { background: #FF0000; }@media (min-width: 768px) { body { background: #000000; }}

A partir de 768px, temos um fundo preto

768px e acima 0 a 767pxUma Grid, vrios tamanhos.col-xs-*.col-sm-*.col-md-*.col-lg-*TabletsDesktopsMonitores MaioresCelularesParte 2 Comeando com o BootstrapAs Colunas da Grid

.col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1 .col-md-1

.col-md-8 .col-md-4

.col-md-4 .col-md-4 .col-md-4

.col-md-6 .col-md-6

Os nmeros no final da classe definem quantas colunas aquele elemento ocuparFormulrio Bsico em Bootstrap

Formulrio Bsico em Bootstrap

Formulrio Bsico em Bootstrap

BootstrapUma mo na roda!Muito ObrigadoRodrigo Ribeiro

Webdesigner e Front EndSistemas Online de Gerenciamento de ClnicasAplicaes para Corretores de SegurosSites institucionais

www.facebook.com/rodrigo.milanobr.linkedin.com/in/rodrigomilano