Importante! Esta aula é continuação de Bootstrap – Starter Template. Se você ainda não sabe como adicionar o Bootstrap em sua página ou site, então veja a aula anterior.
Quando iniciamos um site, precisamos planejá-lo. Algumas ferramentas de wireframe podem nos ajudar nesta ação, na qual podemos desenhar a estrutura e criar protótipos das páginas que irão compor o nosso site.
Quando criamos estes protótipos logo nos deparamos com linhas e colunas e é justamente este problema que o sistema de grid do Bootstrap resolve.
DIVs
A tag <DIV> do HTML serve para criar divisões e seções dentro da estrutura de uma página WEB. Com o advento do HTML 5, basicamente toda a estrutura de uma página é criada usando DIVs. Antigamente as estruturas da páginas eram criadas como se fossem tabelas do Microsoft Word, uma verdadeira bagunça, de dificil manutenção e nada responsivo.
container
A DIV classificada como container, embora seja opcional é a mais importante do sistema de grid do Bootstrap. Ela define a área de conteúdo do site.
<div class="container"> </div>
row (linha)
A DIV classificada como row permite criar linhas dentro de um container.
<div class="container"> <div class="row"> </div> </div>
col (coluna)
A DIV classificada como col permite dividir as linhas em 1 ou até 12 colunas.
<div class="container">
<div class="row">
<div class="col">
Eu sou a coluna 1
</div>
<div class="col">
Eu sou a coluna 2
</div>
<div class="col">
Eu sou a coluna 3
</div>
</div>
</div>
Exemplo prático do sistema de grid do Bootstrap
Supondo que você queira desenvolver o seguinte protótipo criado no site Draw.IO
Logo de cara notamos que a foto e os texto de apresentação do curriculo se encontram na mesma linha, porém separados em duas colunas. Esta estrutura usando Bootstrap ficaria da seguinte forma;
<div class="container">
<div class="row">
<div class="col"> Esta é a primeira coluna</div>
<div class="col"> Esta é a segunda coluna</div>
</div>
</div>
O resultado será este;
Agora que a linha e a coluna estão criadas, podemos adicionar o conteúdo. Vamos adicionar a foto e o texto de apresentação;
<div class="container">
<div class="row">
<div class="col">
<img src="https://trello-attachments.s3.amazonaws.com/5c86ec74820b7c60eb465f4d/183x183/a0068e7488082b28d6b3611c778612a6/eu.jpg">
</div>
<div class="col">
<h1>Currículo do Anderson</h1>
<p>Endereço: Rua ononononono<br/>
Atibaia/SP</p>
<p>Telefone: (11) 999.999999</p>
</div>
</div>
</div>
O resultado será este;
Redimensionando o tamanho das colunas
No entanto perceba que o Bootstrap dividiu a row exatamente ao meio, mas ao olharmos o wireframe percebemos que a primeira coluna na qual está a foto é menor que a coluna aonde está texto de apresentação.
Para resolvermos isso temos que ter em mente o seguinte…
O máximo de colunas que o bootstrap trabalha é 12.
Sabendo que o máximo de colunas que podemos ter é 12, basta indicarmos para a DIV col qual é o tamanho dela, bastando colocar o número que espaço que ela irá ocupar dentro deste limite de 12 colunas.
O resultado será;
Aprendemos então que podemos criar colunas com ou sem números. Quando criamos sem os números o Bootstrap divide a linha em tamanhos iguais, mas quando precisamos redimensionar uma ou mais colunas é necessário fazer o cálculo de espaço considerando sempre que a soma dos espaços ocupados por cada coluna não pode ser maior, nem menor de 12.
Criando outras linhas e colunas
Olhando para o wireframe, o passo seguinte será criar a linha da Formação Acadêmica e depois a Experiência Profissional. Perceba que o texto da formação acadêmica e experiência não estão divididos em colunas, portanto podemos criar uma única coluna para o texto, ficando assim;
<!-- Segunda linha - Formação Acadêmica -->
<div class="row">
<div class="col">texto aqui...</div>
</div>
<!-- Terceira linha - Experiência Profissional -->
<div class="row">
<div class="col">texto aqui...</div>
</div>
O código completo desta página ficou assim;
<!doctype html>
<html lang="pt-br">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-3">
<img src="https://trello-attachments.s3.amazonaws.com/5c86ec74820b7c60eb465f4d/183x183/a0068e7488082b28d6b3611c778612a6/eu.jpg">
</div>
<div class="col-9">
<h1>Currículo do Anderson</h1>
<p>Endereço: Rua ononononono<br/> Atibaia/SP
</p>
<p>Telefone: (11) 999.999999</p>
</div>
</div>
<!-- Segunda linha - Formação Acadêmica -->
<div class="row">
<div class="col">
<br/>
<h2> Formação Acadêmica</h2>
<ul>
<li>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
<li>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
<li>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
</ul>
</div>
</div>
<!-- Terceira linha - Experiência Profissional -->
<div class="row">
<div class="col">
<br/>
<h2> Experiência Profissional</h2>
<ul>
<li>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
<li>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
<li>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</li>
</ul>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
Veja ao vivo aqui, faça o download aqui e o resultado será este;
Você pode ver um exemplo mais completo aqui.
Dica: Otimize seu tempo de codificação
O site shoelace.io oferece uma ferramenta bem legal para criar a estrutura do seu site. Basta ir arrastando o mouse para criar linhas, colunas e definir o tamanho das colunas.
