O documento aborda o Bootstrap 3, um framework mobile first para desenvolvimento web, destacando suas melhorias em relação ao Bootstrap 2.3, como um sistema de grids responsivo baseado em 12 colunas. São apresentadas as classes principais para construção dos grids, que são .container, .row e .col-xx-yy, essenciais para o design responsivo. Além disso, o texto inclui exemplos práticos e referências para mais informações sobre a utilização do grid.

1. GRIDS COM
BOOTSTRAP 3
INTERCÉLULAS
POR ÍTALO WAXMAN

2. 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 ;)

3. BOOTSTRAP 3.0 X BOOTSTRAP 2.3
Totalmente 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/

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

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

6. ENTENDENDO MELHOR
Para 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

7. ALGUMAS OBSERVAÇÕES
As 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.

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

9. 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:

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

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

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

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

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

15. MUITO
OBRIGADO!