Artigo original: Learn the Bootstrap 4 Grid System in 10 Minutes
Escrito por: Elena-Cristina Conacel
Tradução em português europeu
O sistema de grelha do Bootstrap 4 é utilizado para layouts responsivos.
Um layout responsivo representa a forma como os elementos ficam alinhados numa página em resoluções diferentes. É importante compreender como utilizar o sistema de grelha (do inglês, grid system) antes de aprender qualquer outro componente do Bootstrap 4, porque, para qualquer elemento que utilizes, terás de colocá-lo algures no ecrã.
Vamos começar!
Índice
A grelha do Bootstrap 4 consiste em recipientes (do inglês, containers), linhas e colunas. Vamos observar cada um e explicá-los.
Recipientes do Bootstrap 4
Um recipiente do Bootstrap 4 é um elemento com a classe .container. O recipiente é a raiz do sistema de grelha do Bootstrap 4 e é utilizado para controlar a largura do layout.
O recipiente do Bootstrap 4 contém todos os elementos na página. Isto quer dizer que a tua página deve ter a seguinte estrutura: primeiro o corpo da página HTML, dentro dele, deves adicionar um recipiente e todos os outros elementos dentro do recipiente.
<body>
<div class="container">
...
</div>
</body>A simples classe .container define a largura do layout com base na largura do ecrã. Esta posiciona o conteúdo no centro da página, alinhando-o horizontalmente. Existe espaçamento igual entre o recipiente do Bootstrap 4 e o limite esquerdo e direito da página.
O .container diminui gradualmente à medida que a largura do ecrã diminui e ocupa a largura toda em mobile. A largura do recipiente é definida dentro da biblioteca do Bootstrap 4 para todas as dimensões de ecrã. Podes ver os tamanhos exatos aqui.
Um recipiente de largura completa ocupa 100% da dimensão do ecrã, independentemente da largura do ecrã. Para utilizá-lo é necessário adicionares a classe .container-fluid.
<div class="container">
Hello! I am in a simple container.
</div>
<div class="container-fluid">
Hello! I am in a full-width container.
</div>Podes observar o CodePen aqui.
Para ver as diferenças entre os dois tipos de recipientes, podes abrir o pen na tua consola e alternar entre dimensões de ecrã.
Linhas do Bootstrap 4
As linhas do Bootstrap 4 são cortes horizontais do ecrã. São utilizadas apenas como invólucros das colunas. Para utilizá-las, precisas da classe .row.
<div class="row">
...
</div>Aqui estão as coisas mais importantes para memorizares sobre as linhas do Bootstrap 4:
- São utilizadas apenas para conter colunas. Se colocares outros elementos dentro da linha juntamente com colunas não irás obter o resultado esperado.
- Têm de ser colocadas dentro de recipientes. Se não fizeres isto, irás obter um scroll horizontal na tua página. Isto acontece porque as linhas têm margens negativas à esquerda e de 15 à direita. O recipiente tem paddings de 15px. Por isso, ele neutraliza as margens.
- As colunas têm de ser descendentes da linha. Caso contrário, não vão ficar alinhadas. As linhas e colunas são criadas para trabalhar em conjunto nesta hierarquia rigorosa.
Colunas do Bootstrap 4
Podemos agora avançar para a parte interessante deste tutorial, as colunas do Bootstrap 4. As colunas são óptimas! Ajudam-te a dividir o ecrã horizontalmente.
Se colocares apenas uma coluna na tua linha, esta irá ocupar toda a largura. Se adicionares duas colunas, cada uma delas irá ocupar 1/2 da largura. O mesmo acontece para qualquer número de colunas.
<div class="container">
<div class="row">
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
<div class="row">
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
<div class="col">
...
</div>
</div>
</div>Podes ver este código no CodePen.
Observação: as colunas não estão coloridas. Apenas adicionei cores para uma descrição mais atrativa visualmente/de maneira a que tenham melhor aspeto.
Definir dimensões para colunas
Utilizar a classe .col define dinamicamente a largura para as colunas. Isto quer dizer que, dependendo do número de colunas numa linha, a largura da coluna será a largura do recipiente dividida pelo número de colunas.
Existe, porém, outra forma de definir colunas. Podes utilizar classes para colunas e definir o seu tamanho.
Desde o início, a grelha do Bootstrap 4 consiste em 12 colunas. Podes selecionar qualquer dimensão entre 1 e 12 para a tua coluna. Se quiseres 3 colunas iguais, podes utilizar .col-4 em cada uma (porque 3*4 colunas cada = 12). Como alternativa, podes definir dimensões diferentes para elas. Aqui estão alguns exemplos:
<div class="row">
<div class="col-6">
...
</div>
<div class="col-6">
...
</div>
</div>
<div class="row">
<div class="col-5">
...
</div>
<div class="col-7">
...
</div>
</div>
<div class="row">
<div class="col-3">
...
</div>
<div class="col-4">
...
</div>
</div>
<div class="row">
<div class="col-6">
...
</div>
<div class="col-7">
...
</div>
</div>Podes ver este código no CodePen.
Se a soma das colunas na tua linha não resultar em 12, elas não vão ocupar toda a linha. Se a soma das colunas ultrapassar 12 então a coluna segue para a linha seguinte. A primeira linha irá exibir apenas os primeiros elementos cuja soma resulta em 12 ou menos.
Definir pontos de quebra para colunas
Se pegares no exemplo acima e o quiseres exibir em mobile, podes deparar-te com alguns problemas. Exibir cinco colunas em mobile vai tornar o conteúdo ilegível.
É aqui que entram em ação os componentes mais potentes do Bootstrap 4. De maneira a teres layouts diferentes em ecrãs de dimensões diferentes, não vais precisar de escrever media queries. Em vez disso, podes utilizar os pontos de quebra das colunas.
Um ponto de quebra é uma variável do Bootstrap 4 que representa a resolução de ecrã. Quando estás a especificar um ponto de quebra para uma classe, estás a indicar à classe para estar ativa apenas em resoluções que são pelo menos tão grandes como o número que o ponto de quebra armazena.
A classe mais simples que vamos aprender é a classe .col-[breakpoint]. Quando utilizas esta classe, estás a definir o comportamento para as colunas apenas quando são exibidas em dispositivos com um resolução de pelo menos o que está definido no ponto de quebra. Até ao ponto de quebra fornecido, as tuas colunas vão alinhar-se verticalmente desde o início. Após o teu ponto de quebra, estas vão alinhar-se horizontalmente por causa da classe.
O Bootstrap tem 4 pontos de quebra que podes utilizar:
.col-smpara telemóveis maiores (dispositivos com resoluções ≥ 576px);.col-mdpara tablets (≥768px);.col-lgpara computadores portáteis (≥992px);.col-xlpara computadores (≥1200px)
Digamos que queres exibir duas colunas, uma após a outra verticalmente, em ecrãs pequenos e na mesma linha em ecrãs maiores. Terás de especificar o ponto de quebra onde as colunas ficam na mesma linha.
No nosso exemplo, vamos utilizar o ponto de quebra .col-lg e ver como as colunas ficam em ecrãs diferentes. Para resoluções que são menores do que o ponto de quebra fornecido (<992px), as colunas serão exibidas verticalmente. Isto significa que em dispositivos mobile e tablets, as colunas terão este aspeto:
Para dispositivos que têm uma resolução que é maior ou igual ao ponto de quebra (≥992px), as colunas ficam na mesma linha. Isto significa que, em portáteis e computadores vais obter este resultado:
<div class="row">
<div class="col-lg">
...
</div>
<div class="col-lg">
...
</div>
</div>Podes ver este código no CodePen. Se abrires o Codepen noutra janela e observares a página em resoluções diferentes, verás as colunas a alterar o seu posicionamento.
Se quisesses que as duas colunas ficassem na mesma linha a partir da dimensão de telemóveis maiores, poderias utilizar .col-sm, para tablets .col-md e para ecrãs extra largos .col-xl.
Definir dimensões e pontos de quebra para colunas
Podes combinar as dimensões e os pontos de quebra e utilizar apenas uma classe com o formato .col-[breakpoint]-[tamanho].
Por exemplo, se quiseres que três colunas de dimensões diferentes fiquem alinhadas numa linha com a resolução de um portátil, precisas de fazer isto:
<div class="row">
<div class="col-lg-4">
...
</div>
<div class="col-lg-3">
...
</div>
<div class="col-lg-5">
...
</div>
</div>Irás obter este resultado em resoluções <992px:
Para ecrãs que são ≥992px, o resultado será este:
De novo, podes ver este código no CodePen.
Se, porém, quiseres exibir uma coluna por linha em resoluções mobile mais pequenas, duas colunas por linha em tablets e quatro em portáteis ou dispositivos de maior resolução, o que podes fazer?
Adicionas várias classes para uma única coluna a descrever o comportamento em cada resolução. Ao utilizar várias classes, especificas que o conteúdo ocupará seis lugares em tablets e três em portáteis.
<div class="row">
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
<div class="col-sm-6 col-lg-3">
...
</div>
</div>O resultado será apresentado assim em tablets:
Em portáteis e resoluções maiores, terás este resultado:
Este exemplo também está disponível no CodePen.
Como exercício, podes tentar criar linhas com números diferentes de colunas, dependendo da dimensão do ecrã, e verificar o comportamento na consola do teu navegador.
Deslocar colunas
Se não quiseres que as colunas fiquem encostadas umas às outras, podes utilizar a classe .offset-[breakpoint]-[tamanho], juntamente com o .col-[breakpoint]-[tamanho].
Utilizar esta classe é como adicionar uma coluna vazia antes da tua coluna. Aqui está um simples exemplo:
<div class="row">
<div class="col-md-4 offset-md-4">
...
</div>
<div class="col-md-4">
...
</div>
</div>Podes ver este código no CodePen.
Podes utilizar a classe em qualquer coluna da linha. Aqui estão mais alguns exemplos:
<div class="row">
<div class="col-md-4">
...
</div>
<div class="col-md-4 offset-md-4">
...
</div>
</div>
<div class="row">
<div class="col-md-4 offset-md-2">
...
</div>
<div class="col-md-4 offset-md-2">
...
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3">
...
</div>
</div>Colocar linhas dentro de colunas
Pode ser uma surpresa, mas podes adicionar uma linha dentro de uma coluna!
A linha em questão (que terá a largura da sua coluna pai) será, então, dividida em 12 colunas (mais pequenas) que podes referenciar através das classes .col-* .
Vamos observar o que acontece quando inserimos uma nova linha dentro de uma coluna:
<div class="row">
<div class="col-md-8">
...
<div class="row">
<div class="col-md-5">
...
</div>
<div class="col-md-7">
...
</div>
</div>
</div>
</div>
<div class="col-md-4">
...
</div>
</div>Podes ver este código no CodePen.
Ao saber isto, podes aprofundar muito a organização da tua informação. As colunas vão fornecer uma maneira simples de poderes gerir o teu espaço.
Isto termina os conhecimentos básicos em relação ao sistema responsivo de grelha do Bootstrap 4.
Leitura adicional
Se tiveres mais algum tempo, aqui estão alguns recursos bastante úteis:
- Documentação oficial do sistema de grelha (link em inglês), do GetBootstrap
- Tutorial em vídeo (link em inglês), do Scrimba
Este artigo foi publicado inicialmente no blog BootstrapBay. Faz parte de uma grande série de tutoriais do Bootstrap 4 chamada 14 Days of Bootstrap 4 (14 Dias de Bootstrap 4, em inglês). Se desejares continuar a aprender sobre os componentes do Bootstrap 4, estes artigos são um bom sítio para começar.
Se quiseres alavancar o teu desenvolvimento com um template do Bootstrap, podes verificar o nosso marketplace.
Antes de te aprofundares, contudo, tira um momento para celebrar as tuas novas habilidades obtidas!
