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 italo.waxman@tecsinapse.com.br

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!