GRIDS COM BOOTSTRAP 3
INTERCÉLULAS
POR ÍTALO WAXMAN
O QUE É BOOTSTRAP?
Elegante, intuitivo e poderoso MOBILE FIRST FRAMEWORK para um desenvolvimento web mais rápido e mais fácil completamente desenvolvido com HTML, CSS E JS.
Em outras palavras é uma solução simples e ágil para construir projetos web repleta de elementos e funções personalizáveis baseados em HTML, CSS e JS que facilita bastante a vida dos desenvolvedores ;)
BOOTSTRAP 3.0 X BOOTSTRAP 2.3Totalmente focado em experiência mobile first (responsive);
Completa mudança nas classes de construção dos grids (col-xx ao invés de span-xx);
Ui kit reformulado com elementos visuais mais modernos e baseados no flat design;
Muito mais performático e semântico que sua versão anterior;
Existe um site onde é possível você atualizar um projeto construído com a versão antiga do Bootstrap 2.3 para a estrutura da versão 3.0: http://code.divshot.com/bootstrap3_upgrader/
O QUE É UM GRID?
Em design gráfico, a denominação grid tem relação direta com a estrutura do projeto (esqueleto). Com o uso de linhas guias verticais e/ou horizontais podemos criar grids que facilitarão o alinhamento, a proporção e o posicionamento dos elementos de um projeto.
Uma curiosidade, todo o layout dessa apresentação foi construído utilizando o grid do Bootstrap 3.0.
SISTEMA DE GRIDS DO BOOTSTRAP
Os grids do Bootstrap 3.0 baseiam-se em um sistema mobile first responsivo dividido em 12 colunas que variam de tamanho de acordo com a resolução de tela. Para facilitar a construção são utilizadas classes predefinidas para configurações diversas como por exemplo o tamanho, espaçamento e visibilidade de cada elemento.
Para mais informações sobre o grid do Bootstrap 3.0, acesse: http://getbootstrap.com/css/#grid
ENTENDENDO MELHORPara construção dos grids do Bootstrap são usadas 3 classes principais: .container, .row e .col-xx-yy;
.container - Serve para definir a largura total do seu projeto, para uma largura fixa utiliza-se .container e para larguras fluídas (100% width) utilizamos .container-fluid;
.row - Serve para criação de grupos de colunas (linha), ele deve vir dentro do .container e conter todas as colunas (.col-xx-yy) para correto espaçamento;
.col-xx-yy - Serve para especificar número de colunas que o elemento ocupará no seu grid. Por exemplo, um elemento que ocupará 3 colunas deve ser usado .col-xs-3;
A estrutura do código do grid deve ser dessa forma hierárquica: .container > .row > .col-xs-3
ALGUMAS OBSERVAÇÕESAs colunas criam espaços entre si (30px) para separação do conteúdo e quebra de linha;
Se mais de 12 colunas forem colocadas numa mesma .row, as colunas extras irão quebrar e gerarão uma nova linha de colunas;
Pelo fato de ser responsivo, automaticamente as colunas irão se rearranjar dependendo do resolução de tela;
É muito importe ficar atento a utilização das classes do grid para correto comportamento das colunas.
ENTENDENDO MELHOR
Lembrar de sempre envolver as colunas dentro de um elemento com a classe .row.
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-3 COL-MD-3 COL-MD-3 COL-MD-3
COL-MD-4 COL-MD-8
.ROW
CLASSES DO GRID
XS - Para Smartphones - Atinge todos as resoluções;
SM - Para Tablets - Atinge resoluções > 768px;
MD - Para Desktops - Atinge resoluções > 992px;
LG - Para Desktops - Atinge resoluções > 1200px;
As colunas possuem 4 principais classes para resoluções específicas, são elas:
ENTENDENDO MELHOR
Um mesmo elemento pode ter tamanhos específicos para cada resolução alvo.
.COL-XS-3REFERÊNCIA DA RESOLUÇÃO QUE DESEJA ATINGIR
NÚMERO TOTAL DE COLUNAS QUE OS ELEMENTOS FILHOS OCUPARÃO
ESTRUTURA BÁSICA
<div class=“container”> <div class=“row”>
<div class=“col-sm-4 col-xs-12”></div> <div class=“col-sm-4 col-xs-12”></div> <div class=“col-sm-4 col-xs-12”></div>
</div> </div>
A estrutura básica de um grid como mencionamos deve ser da seguinte maneira:
TEREMOS UM PROJETO COM LARGURA FIXA
CADA ELEMENTO OCUPARÁ 4 COLUNAS EM TABLETS E 12 COLUNAS EM SMARTPHONES.
CLASSES COMPLEMENTARES
Temos também algumas classes complementares usadas no grid para determinadas funções:
Hidden-xs - Usada para esconder elementos em determinada resolução
Col-xs-offset-2 - Usado para jogar as colunas para a direita de acordo com o número
Col-xs-push-2 - Usado para jogar as colunas para a esquerda de acordo com o número
ENTENDENDO MELHOR
Você pode ter vários offsets por elemento de acordo com as resoluções que desejar
COL-MD-OFFSET-3 COL-MD-3 COL-MD-3 COL-MD-3
COL-MD-4 .ROW
COL-MD-3 COL-MD-OFFSET-6 COL-MD-3
LINKS COMPLEMENTARES
Caso tenham dúvidas só me dar um ping em [email protected]
http://getbootstrap.com/css/#grid
http://websocialdev.com/2015/03/23/entendendo-o-sistema-de-grid-do-bootstrap/
https://edsonjunior.com/compreendendo-grid-do-bootstrap/
https://www.youtube.com/watch?v=8sU-IVaQYgk
https://www.youtube.com/channel/UCkju_Wrpg7mzma1qM2GFrlQ
MUITO OBRIGADO!
Top Related