.inbound-form-wrapper{ background-color: #f9cd26 !important; padding-left: 10px !important; }

A Grid do Bootstrap: Tudo que você sempre quis saber mas não tinha a quem perguntar

A Grid do Bootstrap Tudo que Voce Sempre-Quis Saber Mas Não Tinha a Quem -Perguntar

A Grid do Bootstrap

 
E se houvesse um jeito de se criar um site responsivo sem ficar maluco com cálculos e regras de Media Query?
 
Não se desespere, tem um jeito… E este jeito você vai descobrir agora!
 
Eu escrevi este artigo simplesmente porque estava cansado de procurar por algo completo sobre a Grid do Bootstrap. O máximo que eu achava eram tutoriais que apenas copiavam o texto (super resumido) do próprio site do Bootstrap.
 
Então, humildemente eu escrevi este artigo e o batizei de:

A Grid do Bootstrap: Tudo que você sempre quis saber mas não tinha a quem perguntar.

 

Introdução: O que é uma Grid

 
A grid é um dos melhores caminhos para se criar um layout responsivo.
 
Pode-se dizer que a Grid do Bootstrap seja a espinha dorsal deste framework. Então, entender como funcionam suas regras e classes é primordial.
 
Este framework tornou-se tão utilizado, que foi criada até uma versão em português, o Globo Boostrap. Uma iniciativa da equipe de desenvolvimento da Globo.com para usá-lo no portal de notícias.
 
Mas como saber se você está trabalhando da maneira correta e usando todos os recursos do Bootstrap?
 
Se você quer saber a resposta para esta e muitas outras perguntas, continue lendo este artigo. Nele você vai entender mais sobre:
  • Como funcionam as classes de tamanhos (col-xs-* col-sm-* col-md-* col-lg-*)
  • Como criar colunas de vários tamanhos e responsivas
  • Como aninhar colunas (inserir uma dentro da outra)
  • Como empurrar uma coluna para a direita
  • Como alternar a posição das colunas entre si
  • Como mostrar e/ou esconder uma coluna de acordo com o tamanho da tela
 
 

Leia esta história comum

 
Você começa a fazer um layout, mexe aqui, ajusta ali.. Faz análise de concorrentes, escolhe cores, fontes, etc…
Depois de horas trabalhando em seu projeto, finalmente você chega a um bom resultado. Fica animado e posta no grupo de webdesign pedindo sugestões e críticas…
 

Mas, a galera começa a criticar:

  • “Tá desalinhado”
  • “Centraliza isso”
  • “Tá sem margem”
  • “Tá colando um no outro”
  • “Não tem espaço”

Você já passou por isso?

Se não passou, já deve ter visto uma história parecida. Isso acontece porque, na maioria dos casos, faltou uma das melhores ferramentas do Design: Uma Grid.
 
Mas afinal o que é uma grid? Que bom que você perguntou. Isso nos leva à próxima parte deste artigo.
 

Se você acha que este artigo está sendo útil, compartilhe-o para que outras pessoas também possam ser ajudadas. Basta escolher sua rede social preferida e clicar em um dos botões flutuantes à direita >>>
 
 

O que é uma grid e como surgiu

Uma grid (ou malha) é um elemento que surgiu para dar organização ao design. É uma ferramenta que dá ordem aos elementos visuais. A ideia era facilitar a diagramação de blocos de texto e imagens, guiando o olhar do leitor. No site Chief of Design existe uma ótima Guia sobre Grid.
 
 
Exemplo visual de como é mais simples organizar um layout quando se usa uma grid

As linhas azuis mostram como uma grid alinha os blocos de informação

 
 
 
Sim, as grids existem no Design desde muito antes dos Frameworks. Aliás, muito antes da Internet surgir.

Veja no exemplo abaixo, um cartaz do Designer Suíço Josef Müller-Brockmann. Seu estilo estruturado, permite-nos detectar facilmente o uso de grids na organização desta peça de design.

 
Note o estilo estruturado de layout

Note o estilo estruturado de layout

 
 
 
“O Sistema de grid é uma ajuda, não uma garantia. Ele permite um número de usos possíveis e cada designer pode procurar uma solução apropriada ao seu estilo pessoal. Mas você precisa aprender como se usa uma uma grid; é uma arte que requer prática”
Josef Muller-Brockmann
 
Então, criou-se a grid para dar ordem e facilitar o design de materiais impressos. Mas também a usamos no design digital.
 

A grid está presente no Webdesign, Design de Aplicativos e muitas outras interfaces eletrônicas, ajudando-nos a melhorar a organização das informações.

Veja no site Tech Crunch, como a grid foi usada para alinhar o conteúdo. Adicionei as linhas vermelhas para evidenciar a visualização da grid.

 
Grid do Site Tech Crunch
 
 

Ah, quer dizer então que a Grid não foi um invenção dos Webdesigners?

 
Exatamente. Elas existem desde os tempos antigos, em livros e pergaminhos.
Olhe agora a figura a seguir. Note como os blocos de texto estão alinhados de acordo com um padrão.
 
Grid de um livro antigo
 
 
 

A Grid no Webdesign

 
Quando um site tem um sistema de grids bem projetado, ele cria consistência e organização no design em geral. Isto é importante para se melhorar a usabilidade e a organização da informação.
 
 
No ambiente digital, as grids são um suporte importante para se a criar layouts responsivos.
Elas começaram a ganhar notoriedade mais ou menos ao mesmo tempo que foram surgindo os navegadores mobile e os diferentes tamanhos de telas. Criar layouts responsivos sem o uso de um sistema de grid torna o trabalho do Desenvolvedor Front End muito mais difícil. E a coisa vai piorando conforme temos mais telas e diferentes layouts internos do sistema.
 
Imagine o site do G1 sem uma grid. Como ficaria?
 
G1 sem grid
 
Dá pra notar que fica mais difícil percorrer a página à procura de uma notícia? Também vemos que não existem blocos de informação e tudo parece estar jogado na página.
 

Principais vantagens de usar uma grid

 

Do lado do Desenvolvedor

  • Simplifica o processo de criação
  • Facilita alinhamento de conteúdo
  • Melhora a precisão de um layout
 
Do ponto de vista do Usuário
  • Ajuda a orientar o seu olhar pelos blocos de informação.
  • Facilita identificar o conteúdo
  • Organiza blocos de informação
Normalmente uma grid é um framework de css, com colunas e larguras preestabelecidas.
 
 
 

O que é um Framework de CSS

Um framework é um conjunto de classes de CSS criadas para facilitar o desenvolvimento de sites e sistemas. Estas regras otimizam o começo de um projeto. Assim evitamos ter que começar do zero toda vez que se inicia um novo layout.
Em relação às grids, normalmente são regras de tamanhos para elementos html. Em quase todos frameworks, usam-se colunas para se conseguir estes diferentes tamanhos.
 
Foram surgindo então, vários frameworks usando grids:
  • 960gs
  • GridPak
  • Responsify
  • Gridinator
  • e outros…
Com o tempo, alguns frameworks passaram a inserir não apenas as grids mas também elementos de interface.
Além da grid, alguns incluem:
  • Tabelas
  • Abas
  • Popups Modais
  • Botões
  • Acordions
É aí que começaram a surgir frameworks mais robustos, como o Foundation e o Bootstrap. Eles passaram a incluir javascript, o que permitiu termos certas funcionalidades já criadas de antemão.
 
Além disso, ainda possuem padrões de Tipografia e Cores, ou seja, são frameworks completos!

 

A grid do Bootstrap

Trata-se de um conjunto de classes pré definidas para facilitar a criação de páginas responsivas. Com ela você consegue montar praticamente qualquer layout.
 
A responsividade advém do uso de media queries no css, o que facilita imensamente a vida do desenvolvedor Front End.
 
É organizada em colunas que vão de 1 a 12. Estas colunas são organizadas dentro de linhas. As linhas ficam dentro de um container principal.
 
Este container pode ter sua largura fluida ou fixa. Na versão fluida, ele sempre ocupará toda a extensão da janela, ou “viewport”. Na versão fixa, ele terá 3 tamanhos fixos para diferentes larguras de viewport. Veremos quais são estes tamanho mais adiante.

Para a versão fixa temos a classe “.container” e para a versão fluida, “.container-fluid“. A estrutura do HTML, de maneira simples é: Container > Linha > Colunas.

 
Veja na figura abaixo um exemplo de grid Bootstrap com duas linhas. Na primeira linha temos 2 elementos. O primeiro ocupa o espaço de 4 colunas, enquanto o segundo ocupa 8 colunas.
Já na segunda linha, temos 4 elementos. Seus respectivos tamanhos são: 2, 2, 3 e 5 colunas. Note que, tanto na primeira linha quando na segunda, a soma das larguras de todos elementos é 12.
As barras cinza foram colocadas apenas para ilustrar e facilitar o entendimento de como se comportam os elementos. Eles sempre seguem o alinhamento dessas colunas “invisíveis”.
 
Exemplo de Grid e Colunas do Bootstrap
 
 
Está gostando do artigo? Então cadastre seu email abaixo. Você fará parte de nossa comunidade esperta e será o primeiro a receber novos conteúdos.
 
 

Diferença entre layout fluido e fixo

 
 
Um “.container-fluid” (layout fluido) vai ocupar sempre 100% da largura do viewport. Neste caso, seu site será sempre “full screen”.
 
Veja na imagem abaixo como um “.container-fluid” ocupa todo o tamanho disponível. Note que as colunas também se tornam mais largas.
 
 
Layout fixo e layout fluido bootstrap
 
Já um “.container” (layout fixo) tem 3 tamanhos fixos, que vão ser usados conforme o tamanho do viewport (janela do navegador) onde o site está sendo visto.
 
  • Para tamanhos de viewport de 0 a 767px, o “.container” tem sempre largura auto.
  • A partir de 768px até 991px, ele terá 750px.
  • De 992px até 1199px,o nosso “.container” tem 970px.
  • De 1200px pra cima, ele terá sempre 1170px
Os valores onde a largura do “.container” muda, são chamados de Break Points. Estas alterações são possíveis graças às Media Queries.
 
Para entender o que é Media Query, veja o meu mini tutorial abaixo
 

 

Breakpoints Boostrap

  • 768px
  • 992px
  • 1200px
 
Estes valores sinalizam a partir de qual tamanho, novas regras de css passarão a valer. De maneira simplificada, podemos dizer que você poderá ter um layout para o tamanho de 0 a 767px, outro layout para o tamanho entre 768px e 991px, mais um layout entre 992px e 1199px e finalmente um outro layout para tamanhos maiores ou iguais a 1200px.
 
Já parou pra pensar no poder disso?
 
Estude bem a tabela abaixo para entender como se comportam as classes do Bootstrap de acordo com o tamanho do viewport. Esta tabela é uma tradução do conteúdo original do site do Bootstrap.
 
Grid do Bootstrap 3
Extra Peq.(extra small)
Ceulares (<768px)
Pequeno (small)
Tablets (≥768px)
Médio (medium)
Desktops (≥992px)
Grande (large)
Desktops (≥1200px)
Largura máxima do container
None (auto) 750px 970px
1170px
Comportamento da Grid
Horizontal sempre
Uma sobre a outra no início, horizontal acima dos breakpoints
Prefixo das Classes
.col-xs- .col-sm- .col-md-
.col-lg-
Largura máxima da coluna
Auto ~62px ~81px
~97px
Espaço entre colunas
15px de cada lado da coluna(total 30px)
 
 
 
E as linhas? Há somente uma classe para elas: “.row”.
 
E finalmente as colunas. Agora temos que ter em mente que estas colunas variam de tamanho de acordo com duas regras básicas:
  • Largura do viewport
  • Número de colunas que escolhemos para elas.
No Bootstrap, um elemento HTML pode ter sua largura definida entre 1 e 12 colunas. Isto significa que, quando escolhemos o tamanho 12, este elemento terá 100% da largura do elemento “.container”. Se quisermos que este elemento tenha metade da largura do “.container” usaremos 6 colunas para sua largura.
 
Como conseguir isso? Usando as classes pré estabelecidas, que variam de 1 a 12.
 
Vamos ao exemplo de tamanho 50%. Basta adicionar a classe “.col-md-6”. Se quiséssemos que este elemento tivesse 1/3 da largura do “.container”, então adicionaríamos a classe “.col-md-4”. Notou que 4 é 1/3 de 12?
 
 

Vamos a um exemplo prático?

 
 

See the Pen Exemplo simples de colunas Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

 OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen”
 
 
No exemplo acima, ambas as divs da primeira coluna ocupam 50% do viewport. Já na segunda linha, cada elemento ocupa 1/3 do tamanho do container.
 
Mas esse negócio de “md” aí no meio?
 
Ainda bem que você perguntou. Este é uma abreviação de “medium” ou médio. Significa que, para viewports médios, o elemento terá 50% da largura do Viewport
 
Para cada medida de viewport temos um prefixo:
  • sx – Extra Small (Extra pequeno)
  • sm – Small (Pequeno)
  • md – Medium (Médio)
  • lg – Large (Grande)

 

Veja a figura a seguir, onde mostro em que tipo de tamanho cada classe estará ativa
 
Classes ativas de acordo com o tamanho da tela
 
 
 
xs
sm
md
lg
Este prefixo será interpretado pelo navegador quando a largura da tela for entre 0 e 767px
Este prefixo será interpretado pelo navegador quando a largura da tela for entre 768px e acima
Este prefixo será interpretado pelo navegador quando a largura da tela for entre 992px e acima
Este prefixo será interpretado pelo navegador quando a largura da tela for entre 1200px e acima
Largura do Container = 100%
Largura do Container = 750px
Largura do Container = 970px
Largura do Container = 1170px
Largura da Coluna = Auto
Largura da Coluna: Aproximadamente 62px
Largura da Coluna: Aproximadamente 81px
Largura da Coluna: Aproximadamente 97px
 
 
 
Veja no exemplo abaixo como você pode conseguir vários layouts apenas trabalhando com as classes da grid do Bootstrap
 

Veja aqui… Exemplo de layout com grid by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen”
 
Explicando o código acima
 
A nossa primeira div é o container, que terá seus tamanhos variando de acordo com a largura do viewport. Sugiro que abra este código em uma nova aba e vá diminuindo e aumentando a largura na janela do navegador. Isso te mostrará de um modo 100% prático como funcionam as classes e como cada elemento ganha uma largura distinta.
A segundo div é a linha, com a classe “.row” conforme já mencionei anteriormente.
Dentro da linha temos 4 divs que se comportam de maneira diferente.
 
Estudando as classes das colunas
 
ATENÇÃO! Se você quiser guardar apenas uma coisa deste artigo, entenda tudo que está explicado nos 4 blocos de texto abaixo!
 
Nossa primeira div tem as seguintes classes:
.col-sm-12“, indicando que quando o viewport for maior ou igual a 768px, esse elemento terá a largura de 12 colunas, ou 100%
.col-md-6“, indicando que quando o viewport for maior ou igual a 992px, esse elemento ocupará o espaço de 6 colunas
.col-lg-3“, que fará com que este elemento tenha sua largura equivalente a 3 colunas quando o viewport for maior ou igual a 1200px
 
Nossa segunda div tem as seguintes classes:
.col-sm-9“, indicando que quando o viewport for maior ou igual a 768px, esse elemento terá a largura de 9 colunas
.col-md-6“, indicando que quando o viewport for maior ou igual a 992px, esse elemento ocupará o espaço de 6 colunas
.col-lg-6“, fazendo com que este elemento tenha largura equivalente a 6 colunas também, quando o viewport for maior ou igual a 1200px
 
Nossa terceira div tem as seguintes classes:
.col-xs-6“, indicando que a partir de 0px este elemento já se inicia com a largura de 6 colunas
.col-sm-3“, indicando que quando o viewport for maior ou igual a 768px, esse elemento terá a largura de 3 colunas, ou 100%
.col-md-9“, indicando que quando o viewport for maior ou igual a 992px, esse elemento ocupará o espaço de 9 colunas
.col-lg-2“, que fará com que este elemento tenha sua largura equivalente a 2 colunas quando o viewport for maior ou igual a 1200px
 
Nossa quarta div tem as seguintes classes:
.col-xs-6“, indicando que desde 0px este elemento já se inicia com a largura de 6 colunas
.col-sm-12“, indicando que quando o viewport for maior ou igual a 768px, esse elemento terá a largura de 12 colunas, ou 100%
.col-md-3“, indicando que quando o viewport for maior ou igual a 992px, esse elemento ocupará o espaço de 3 colunas
.col-lg-1“, que fará com que este elemento tenha sua largura equivalente a 1 coluna quando o viewport for maior ou igual a 1200px
 
 

Como mudar uma coluna pra direita: Offset

O “offset” empurra a coluna para a direita usando os mesmo números que as larguras de colunas.

Então, se queremos que uma coluna “ande” o espaço correspondente a 4 colunas, basta inserir “.col-md-offset-4“. Isto adiciona uma margem à esquerda, que a empurrará na largura de quatro colunas quando a janela do navegador estiver no tamanho “md” e acima dele.
 

See the Pen Exemplo simples de offset Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen” 
 
Você poderá sobrescrever esta regra para outros tamanhos de janela (viewport). Vamos a um exemplo: imagine que você tenha uma coluna com tamanho 6 quando a viewport está na medida xs (0 a 767px).
E se você quisesse que este elemento andasse 3 colunas para a direita?
Então você usaria:
 
 
OBS: Notou o “xs” ali no meio? Então não esqueça que este elemento só será empurrado para a direita enquanto o tamanho do viewport for menor que 768px.
 
Agora, para um tamanho maior de tela (sm) você quer que ela tenha tamanho 4 porém sem nenhum offset. Então deverá acrescentar duas classes: “col-sm-4” e “col-sm-offset-0”.
Com o resultado final:
 
Observe que a classe “col-sm-offset-0” sobrescreve a classe “.col-xs-offset-3”, zerando a margem esquerda.

 

Aninhando colunas

 
Aninhar colunas, é o mesmo que inserir uma coluna dentro da outra. Só que você precisa criar uma nova linha dentro da coluna e só depois, criar uma coluna dentro dessa nova linha.

 

Exemplo

 

<div class=”row”>
 
     <div class=”col-sm-6″><! — coluna de primeiro nível –>
 
          <div class=”row”>
 
               <div class=”col-sm-6″> 6 </div><! — coluna de segundo nível –>
 
               <div class=”col-sm-6″> 6 </div><! — coluna de segundo nível –>
 
          </div>
 
     </div>
 
</div>
 
Então, em relação ao container principal, as “.col-sm-6” de segundo nível, tem 25% da largura, enquanto que as “.col-sm-6” de primeiro nível tem 50% da largura. Então, muito cuidado para não se confundir, pois uma “.col-sm-6” de segundo nível, tem a mesma largura que uma “.col-sm-3” de primeiro nível!
 
 

See the Pen Aninhando Colunas no Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen”  

Alterando a ordem das colunas

Você pode alterar o layout de uma página sem precisar alterar a posição do HTML no documento. Imagine que no HTML você opte por colocar uma seção antes de outra. Isso pode acontecer por motivos de SEO, por exemplo. Você pode inverter esta ordem no layout usando as classes “pull” e “push”.
 
Veja um exemplo:

See the Pen Mudando as ordens das colunas no Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen”

 
Qual o truque? Estas duas classes trabalham alterando os valores de ‘position’ usando “left” e “right” com os respectivos valores de acordo com a classe usada.
 
No exemplo acima, a classe “col-md-push-6” contém a regra “left: 50%”. Porque esse valor? Primeiramente, vamos destacar que esta regra só vale para quando o viewport é maior ou igual a 992px, já que usamos “col-md-push-*”. O valor “50%” foi usado porque o número 6 equivale a metade do viewport. Então vamos jogar a coluna para a direita em uma distância de 6 colunas (ou 50%). Já na seção “#nossos-trabalhos” usamos a classe “.col-md-pull-6” que traz a coluna para a esquerda na medida de 6 colunas, ou 50%.
 
Observação: Em inglês, “push” significa “empurrar”. Já “pull” significa “puxar”. Por lembrar sonoramente “puxe”, muitas vezes confundimos “push” com “puxe”. É SEMPRE O CONTRÁRIO.
 
Mais uma vez, veja como é mais simples explicar usando uma ilustração:
 

Pull e Push

 
Notou que as colunas alternaram suas ordens após adicionar “.col-md-push-6” na primeira e “.col-md-pull-6” na segunda?
 
 

Column wrapping

 Quando você coloca mais de 12 colunas em uma linha, as colunas extras são jogadas para baixo, seguindo o “float: left” de toda coluna.
 

See the Pen Column Wrapping no Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen” 
 
É possível criar-se mais de uma linha sem necessariamente adicionarmos um novo elemento com a classe “.row”
 
Apesar disso ser possível, é usado raramente. Trabalhar assim, pode gerar algumas quebras de layout que vão ficando mais difíceis de se contornar conforme o seu projeto vai crescendo.
 

Responsive column resets

 Pode acontecer de uma coluna travar em outra, dependendo das regras para telas pequenas. Isso geralmente acontece quando uma das colunas tem a altura bem maior que a outra
 
Analise atentamente o código abaixo e compare como os dois exemplos de layouts ficam diferentes.
 

See the Pen Responsive column resets no Bootstrap by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen”

 
 

Escondendo e Revelando conteúdos de acordo com o tamanho da tela (Responsive Utilities)

 Se você leu o artigo até aqui, já deve ter notado como a Grid do Bootstrap é poderosa. Ah, e também digo que você está de parabéns. Significa que você está comprometido em aprender tudo que sempre quis saber sobre a Grid do Bootstrap mas não tinha a quem perguntar.
 
Então que tal compartilhar com seus colegas para que todos possam aprender?

Se você acha que este artigo está sendo útil, compartilhe-o para que outras pessoas também possam ser ajudadas. Basta escolher sua rede social preferida e clicar em um dos botões flutuantes à direita >>>

 

 
Voltando ao nosso conteúdo, agora é hora de aprender a mostrar e esconder um conteúdo baseado no tamanho da tela onde seu layout está sendo visto.
 
Vamos supor que você não queria mostrar um banner para os usuários que navegam por celular. Neste caso, você usaria a classe “.hidden-xs”. Este banner ficaria visível para todos os outros tamanho de tela, menos para telas menores que 768px.
Para os outros tamanhos, tem-se as classes “.hidden-sm”, “,hidden-md”, “.hidden-lg”.
Observe que estas classes escondem para o tamanho escolhido mas mostram para todos os outros.
 
Imagine que agora queremos o contrário: mostrar para um tamanho específico e esconder para todos os outros.
Agora a palavra-chave é “visible”. Para mostrar um elemento apenas para celulares, por exemplo, usamos “.visible-xs-*”.
 
As opções são: “.visible-xs-*”, “.visible-sm-*”, “.visible-md-*”, “.visible-lg-*”
 
Agora temos um asterisco logo após os prefixos de tamanho. É que temos opções para escolher o modo de display para este elemento.
 
As opções são:
 
Grupo de classes
 
CSS display
.visible-*-block display: block;
.visible-*-inline display: inline;
.visible-*-inline-block display: inline-block;
 
 

Tabela ilustrativa das classes

 
 
 
Extra small
Small
Medium
Large
.visible-xs-*
Visible
Hidden
Hidden
Hidden
.visible-sm-*
Hidden
Visible
Hidden
Hidden
.visible-md-*
Hidden
Hidden
Visible
Hidden
.visible-lg-*
Hidden
Hidden
Hidden
Visible
.hidden-xs
Hidden
Visible
Visible
Visible
.hidden-sm
Visible
Hidden
Visible
Visible
.hidden-md
Visible
Visible
Hidden
Visible
.hidden-lg
Visible
Visible
Visible
Hidden
 
 
 
 
 
Vamos a um exemplo prático
 
 
Imagine que precisemos dos seguintes layouts, de acordo com a ilustração abaixo
 
Esconde e mostra de acordo com o tamanho do viewport
 
Vamos agora fazer estes layouts usando o Codepen
 
Veja que dentro de cada elemento, coloquei uma explicação das classes que fazem aparecer ou desaparecer de acordo com o layout.
 

See the Pen Responsive Utilities by Rodrigo Ribeiro de Abreu (@millano572) on CodePen.

OBS: Para ver o comportamento do código corretamente, abra-o em uma nova aba clicando em “Edit on Codepen” 
 
Entenda bem estas classes e você conseguirá fazer alterações em seu layout de maneira inteligente. Porém, tome muito cuidado e tenha atenção ao elemento que você esconde. Lembre-se que o elemento sempre será oculto via CSS, no entando seu código HTML ele está sendo carregado.
Então, mesmo que seu layout fique enxuto para mobile, todo o HTML está sendo carregado, gerando lentidão.
 
Por exemplo, imagine que você tenha um carousel (slideshow) com 5 slides (imagens + textos). Mesmo colocando todo ele como “hidden-xs”, saiba que estas imagens e todo HTML estão sendo carregados pelo celular.
Isto ocorre porque a classe .”hidden-xs” tem as seguintes regras:
 
@media (max-width:767px) {
.hidden-xs {
display:none !important
}
}
 
 
Portanto, analise bem se o conteúdo que você está criando realmente é importante e se merece estar no site.
 
Observação: Ao usar esta propriedade em um elemento, você automaticamente torna este conteúdo “inacessível” para leitores de tela. Se você tem interesse em se aprofundar neste assunto, leia o artigo do Maujor sobre leitores de tela de display:none.
 
 

Conclusão

 
A Grid vai te ajudar muito a melhorar seus layouts. Usando a Grid do Bootstrap então, você construirá sites e layouts totalmente responsivos sem muita dor de cabeça.
 
Saiba que muitos problemas que você sempre teve ao fazer um Design, vão deixar de existir quando você se tornar um mestre na Grid do Bootstrap.
 
Combinando tudo que você leu acima, será possível fazer diversos layouts, que se acomodam perfeitamente em quaisquer tamanhos de telas de qualquer dispositivo existem hoje ou futuramente.
 
 

E, para finalizar, eu gostaria muito de saber a sua opinião sobre esse artigo.

Deixe um comentário logo abaixo sobre o que você mais gostou nesse artigo, ou sobre alguma dica extra que você deseja compartilhar conosco ou até mesmo alguma crítica sobre esse texto.

 
E lembre-se: Você não aprendera TUDO sobre a Grid do Bootstrap apenas lendo um artigo. Você precisa praticar. E praticar muito mesmo.
 
Portanto, na próxima vez que você começar um site responsivo, volte para este artigo e use-o como um guia. Tenha certeza que será muito mais fácil do que tem sido até agora.
 
Agora é o melhor momento para você transformar o seu futuro. Comece a praticar agora mesmo.
Se tiver dúvidas, pergunte nos comentários abaixo.
 
Agora você será capaz de criar um site responsivo de uma vez por todas, acredite.
Compartilhe

Rodrigo Milano

Trabalho há 14 anos com criação e desenvolvimento de sites e sistemas online.

Você pode gostar...

  • Rodrigo, muito bom seu artigo. Parabéns!!! Você explica de forma limpa e clara e com uma didática incrível. Se puder colocar mais exemplos práticos eu agradeço. E realmente, é difícil achar tutoriais de Bootstrap como o seu, os outros tutoriais explicam superficialmente.

    • Rodrigo Milano

      Muito obrigado, Eliseu!
      Vou procurar fazer uns slides com exemplos prontos, ou talvez um pequeno ebook.
      Obrigado pela sugestão.

  • Pingback: Bootstrap do Zero – Aula 01 – Conceitos Iniciais | Coding Tutes()

  • Carlos Eduardo

    Olá Rodrigo, tudo bem?
    Primeiro, parabéns pela forma elegante, precisa e direta quanto a grid no bootstrap. Eu costumo utilizar mais
    o CSS por ter sido “doutrinado” a isso. Pra falar a verdade, sempre tive uma certa aversão ao bootstrap, talvez
    pelo fato de eu não usar o Twitter mas enfim… Ou resistência inconsciente mesmo, vai saber,
    De qualquer forma, esse “tutorial” me foi de grande valia, até mesmo para quebrar meus paradigmas.
    Cheguei a sua página pelo vídeo do Youtube em https://www.youtube.com/watch?v=xJltY7_LVMs .
    Sucesso e parabéns novamente.

    • Rodrigo Milano

      Carlos, muito obrigado pelo comentário positivo. Fico feliz que tenha mudado seu modo de pensar.
      Na realidade fico feliz que tenha aberto sua mente para algo novo.
      Bom, por outro lado, digo que você está certo em aprender CSS. Você não foi doutrinado, não. Este é o método mais natural e eu indico com toda certeza: precisa saber CSS sim!
      Estude HTML e CSS sempre! Nunca pare. Use frameworks, se eles te ajudam, mas nunca abandone o restante.
      Sabendo CSS você vai entender o que o Bootstrap faz e principalmente, não ficará preso a ele.
      Continue estudando e colocando em prática. Increva-se no meu canal e assine minha newsletter, pois sempre estou enviando novos conteúdos.

  • sergio silgerd

    Boa Noite Rodrigo!
    Pelo menos agora que estou postando é noite!
    Você me convenceu a mudar para o bootstrap por cauda das GRIDS, sempre construí sites na unha por querer ver as coisas acontecer do meu jeito@
    Mas com a eficiência e praticidade das grids não volto mais atraz!
    Bootstrap na veia!
    Eu sempre uso o Sublime ou o phstorm e raramente o notepad ++, destes três, qual você acha melhor para trabalhar com o bootstrap?
    Parabéns e abraços!

  • Rodrigo Milano

    Sergio, eu gosto muito do Sublime. Mas editor vai muito de gosto pessoal, né?

  • Junior Silva

    Muito bom!

    • fulanodigital

      Valeu!

  • Davi Menezes

    noossa que show!!! muito obrigado pelo artigo, me ajudou muito e tirou váris dúvidas

    • fulanodigital

      Que bom que ajudou.

  • Gilmar Santana

    Olá Rodrigo, tenho uma dúvida. Como poderia aplicar o Bootstrap em um layout (design) de 990px de largura? Estou dando uma olhada em alguns exemplos, mas o tamanho do layout padrão para desktop do Bootstrap parece ser 1170px.

    • fulanodigital

      Gilmar, você pode criar uma configuração personalizada do Bootstrap lá no site oficial. Vá até este link: http://getbootstrap.com/customize/#grid-system e veja que lá exitem as larguras @container-tablet, @container-desktop e @container-large-desktop que é a maior delas. Então você poderá usar 990px e baixar o Bootstrap compilado.

      • Gilmar Santana

        Muito obrigado.

  • Francine Aires

    Adorei a matéria, e as indicações de outros sites. Parabéns muito útil mesmo. Tinha coisas ai que eu usava sem saber muito bem como funcionavam 😛

    • fulanodigital

      Fico feliz que tenha te ajudado Francine.