loader image

Bootstrap – Sistema de Grid

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.

Deixe seu comentário