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.
[well type=””]
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 >>>
[/well]
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.
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
“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.
“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.
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?
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.
[cta id=”884″ vid=”0″]
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”.
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.
[inbound_forms id=”122″ name=”Cadastro no Post”]
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.
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?
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
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
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.
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!
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”.
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:
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.
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.
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?
[well type=””]
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 >>>
[/well]
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
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.
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.
Minha lista de Ferramentas para Designers Informação é o que não falta para quem quer ser um Web Designer. Existem…
26 Comentários
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.
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.
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.
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!
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.
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.
boa noite.. 🙂
Muito bem explicado 🙂 , contudo não devo ter entendido alguma parte ou não percebi. Então me desculpem se a pergunta for redundante.
No paragrafo ANINHANDO COLUNAS eu entendi que seria o colspaw da table…Então como seria para fazer algo do tipo ROWSPAW como a table???
Desde já agradeço a atenção de todos. 🙂
Não tem que pedir desculpas, não 🙂 Perguntar é sempre bom. Aninhar colunas é colocar uma coluna dentro da outra. Não está relacionado com tables e sim com as linhas e colunas que são DIVs.
Artigo excelente, bem detalhada e claro sobre o tema, parabéns. Tenho uma dúvida. Como faço para mudar o número de colunas para uma tela menor que 320px. Por exemplo, defini uma coluna col-xs-4, que irá exibir 3 colunas com ícones, com telas menores que <768px .. Mas eu quero que telas menores que 320px mostre apenas 2 colunas, como eu faria isso?? Sei que eu poderia usar o atributo col-xs-6 que iria exibir 2 colunas, mas seria com telas <768px, o que não quero. E sim duas colunas somente com telas menores que 320px.
Artigo excelente, bem detalhada e claro sobre o tema, parabéns. Tenho uma dúvida. Como faço para mudar o número de colunas para uma tela menor que 320px. Por exemplo, defini uma coluna col-xs-4, que irá exibir 3 colunas com ícones, com telas menores que <768px .. Mas eu quero que telas menores que 320px mostre apenas 2 colunas, como eu faria isso?? Sei que eu poderia usar o atributo col-xs-6 que iria exibir 2 colunas, mas seria com telas <768px, o que não quero. E sim duas colunas somente com telas menores que 320px.
Excelente artigo! Muito esclarecedor. Me ajudou bastante. Só uma dúvida: é possível usar somente a parte de grid do Bootstrap sem carregar todo o framework para meu site?
Primeiramente parabens pelo artigo.
Uma duvida de iniciante. Quero criar um layout 2 4 6.
Na col 2 quero colocar um article que até o fim da pagina, col 2 com height 100%. Na 4 e 6 quero criar com 25%, e em baixo da 4 e 6 quero criar outra linha 5 5, mas nso quero mecher na 2 inicial. Sabe como posso fazer?
Obrigado. Você poderia colocar este código no Codepen ? Assim ficara mais simples entender exatamente o que você precisa, tudo bem?
Só olhando assim, não compreendi exatamente. Ah, já te convido para entar no meu grupo de Bootstrap no Facebook. Lá poderá postar esta dúvida e obter ajuda de outros https://www.facebook.com/groups/webdesignbootstrap/
Este site usa cookies para que possamos oferecer a melhor experiência de usuário possível. As informações dos cookies são armazenadas em seu navegador e executam funções como reconhecê-lo quando você retorna ao nosso site e ajudar nossa equipe a entender quais seções do site você considera mais interessantes e úteis.
Cookies estritamente necessários
O cookie estritamente necessário deve estar sempre ativado para que possamos salvar suas preferências de configuração de cookies.
Se você desabilitar este cookie, não poderemos salvar suas preferências. Isso significa que toda vez que você visitar este site, precisará habilitar ou desabilitar os cookies novamente.
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.
Muito obrigado, Eliseu!
Vou procurar fazer uns slides com exemplos prontos, ou talvez um pequeno ebook.
Obrigado pela sugestão.
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.
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.
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!
Sergio, eu gosto muito do Sublime. Mas editor vai muito de gosto pessoal, né?
Muito bom!
Valeu!
noossa que show!!! muito obrigado pelo artigo, me ajudou muito e tirou váris dúvidas
Que bom que ajudou.
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.
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.
Muito obrigado.
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 😛
Fico feliz que tenha te ajudado Francine.
Show!
boa noite.. 🙂
Muito bem explicado 🙂 , contudo não devo ter entendido alguma parte ou não percebi. Então me desculpem se a pergunta for redundante.
No paragrafo ANINHANDO COLUNAS eu entendi que seria o colspaw da table…Então como seria para fazer algo do tipo ROWSPAW como a table???
Desde já agradeço a atenção de todos. 🙂
Não tem que pedir desculpas, não 🙂 Perguntar é sempre bom. Aninhar colunas é colocar uma coluna dentro da outra. Não está relacionado com tables e sim com as linhas e colunas que são DIVs.
Muito bom, abriu o meu entendimento sobre o assunto.
Que bom que ajudou. 🙂
Deixe aqui suas dúvidas!
Artigo excelente, bem detalhada e claro sobre o tema, parabéns. Tenho uma dúvida. Como faço para mudar o número de colunas para uma tela menor que 320px. Por exemplo, defini uma coluna col-xs-4, que irá exibir 3 colunas com ícones, com telas menores que <768px .. Mas eu quero que telas menores que 320px mostre apenas 2 colunas, como eu faria isso?? Sei que eu poderia usar o atributo col-xs-6 que iria exibir 2 colunas, mas seria com telas <768px, o que não quero. E sim duas colunas somente com telas menores que 320px.
Artigo excelente, bem detalhada e claro sobre o tema, parabéns. Tenho uma dúvida. Como faço para mudar o número de colunas para uma tela menor que 320px. Por exemplo, defini uma coluna col-xs-4, que irá exibir 3 colunas com ícones, com telas menores que <768px .. Mas eu quero que telas menores que 320px mostre apenas 2 colunas, como eu faria isso?? Sei que eu poderia usar o atributo col-xs-6 que iria exibir 2 colunas, mas seria com telas <768px, o que não quero. E sim duas colunas somente com telas menores que 320px.
Excelente artigo! Muito esclarecedor. Me ajudou bastante. Só uma dúvida: é possível usar somente a parte de grid do Bootstrap sem carregar todo o framework para meu site?
Primeiramente parabens pelo artigo.
Uma duvida de iniciante. Quero criar um layout 2 4 6.
Na col 2 quero colocar um article que até o fim da pagina, col 2 com height 100%. Na 4 e 6 quero criar com 25%, e em baixo da 4 e 6 quero criar outra linha 5 5, mas nso quero mecher na 2 inicial. Sabe como posso fazer?
Obrigado. Você poderia colocar este código no Codepen ? Assim ficara mais simples entender exatamente o que você precisa, tudo bem?
Só olhando assim, não compreendi exatamente. Ah, já te convido para entar no meu grupo de Bootstrap no Facebook. Lá poderá postar esta dúvida e obter ajuda de outros
https://www.facebook.com/groups/webdesignbootstrap/