Formulários Responsivos com Bootstrap

17
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

Transcript of Formulários Responsivos com Bootstrap

Page 1: Formulários Responsivos com Bootstrap

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.milanobr.linkedin.com/in/rodrigomilano

Page 2: Formulários Responsivos com Bootstrap

Bootstrap

Uma Ótima Solução

ou

Engessamento do layout?

Page 3: Formulários Responsivos com Bootstrap

O que é o Bootstrap

Bootstrap é o framework de HTML, CSS e JS mais popular para se desenvolver projetos para web

responsivos e "mobile first"

Page 4: Formulários Responsivos com Bootstrap

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

DesktopsMonitores Maiores

Celulares

Page 5: Formulários Responsivos com Bootstrap

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á.

Page 6: Formulários Responsivos com Bootstrap

A Grid do Bootstrap

Exemplo de um layout

Cabeçalho (12 colunas)

Área Lateral(3 colunas)

Conteúdo Principal (9 colunas)

Rodapé (12 colunas)

Page 7: Formulários Responsivos com Bootstrap

A Grid do Bootstrap

Versão Mobile

Cabeçalho (12 colunas)

Área Lateral(3 colunas)

Conteúdo Principal (9 colunas)

Rodapé (12 colunas)

Page 8: Formulários Responsivos com Bootstrap

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)

Page 9: Formulários Responsivos com Bootstrap

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

768px e acima0 a 767px

Page 10: Formulários Responsivos com Bootstrap

Uma Grid, vários tamanhos

.col-xs-* .col-sm-* .col-md-* .col-lg-*

Tablets Desktops Monitores MaioresCelulares

Page 11: Formulários Responsivos com Bootstrap

Parte 2 Começando com o

Bootstrap

Page 12: Formulários Responsivos com Bootstrap

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>

Page 13: Formulários Responsivos com Bootstrap

Formulário Básico em Bootstrap

Page 14: Formulários Responsivos com Bootstrap

Formulário Básico em Bootstrap

Page 15: Formulários Responsivos com Bootstrap

Formulário Básico em Bootstrap

Page 16: Formulários Responsivos com Bootstrap

Bootstrap

Uma mão na roda!

Page 17: Formulários Responsivos com Bootstrap

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.milanobr.linkedin.com/in/rodrigomilano