Formulários Responsivos com Bootstrap
-
Upload
rodrigo-ribeiro-de-abreu -
Category
Internet
-
view
547 -
download
1
Transcript of 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
Bootstrap
Uma Ótima Solução
ou
Engessamento do layout?
O que é o Bootstrap
Bootstrap é o framework de HTML, CSS e JS mais popular para se desenvolver projetos para web
responsivos e "mobile first"
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
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á.
A Grid do Bootstrap
Exemplo de um layout
Cabeçalho (12 colunas)
Área Lateral(3 colunas)
Conteúdo Principal (9 colunas)
Rodapé (12 colunas)
A Grid do Bootstrap
Versão Mobile
Cabeçalho (12 colunas)
Área Lateral(3 colunas)
Conteúdo Principal (9 colunas)
Rodapé (12 colunas)
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)
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
Uma Grid, vários tamanhos
.col-xs-* .col-sm-* .col-md-* .col-lg-*
Tablets Desktops Monitores MaioresCelulares
Parte 2 Começando com o
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>
Formulário Básico em Bootstrap
Formulário Básico em Bootstrap
Formulário Básico em Bootstrap
Bootstrap
Uma mão na roda!
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