Após notar dúvidas recorrentes referente a utilização do Grid do Bootstrap 3, resolvi criar essa apresentação tentando introduzir tais fundamentos de forma mais simplificada. Foram abordados os principais pontos de dúvidas coletados junto à um grupo de desenvolvedores não designers. Dúvidas???

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!