Publicado em

Bootstrap 3: Template de Layout com Três Colunas

Uma das primeiras coisas que você deve saber fazer com o Bootstrap é criar layouts com ele.

Para este tutorial, você vai precisar fazer o download do Bootstrap 3, e criar a estrutura inicial de arquivos. Caso você não tenha feito, é só seguir os passos do tutorial Bootstrap 3: Como Começar.

bootstrap-template-layout-threecolumn

Vou assumir que você já conhece os conceitos iniciais, e assim poderemos começar a escrever a marcação desse layout com o Bootstrap.

[hr]

Passo 1: Crie a Marcação Básica

Na pasta do projeto, crie um arquivo template-twocolumn.htm (ou outro nome que você preferir), e coloque a marcação a seguir:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 3: Layouts</title>

    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="container">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Esse HTML abaixo contém uma estrutura inicial, os metadados, e um espaço para conteúdo. Vamos trabalhar com essa marcação a partir de agora.

[hr]

Passo 2: Crie o CSS

O CSS abaixo é apenas para fins didáticos. Para que você consiga visualizar no browser, como que a estrutura se comporta no navegador.

Crie o arquivo style.css e coloque os seguintes estilos:

/*
 * style.css 
 */
.container, .container-fluid {
 padding-right: 15px;
 padding-left: 15px;
 background-color: #f9f9f9;
}
.row {
 margin-bottom: 20px;
}
[class*="col-"], header, footer, nav, aside, section, div[role="main"] {
 padding-top: 15px;
 padding-bottom: 15px;
 background-color: #f5f5f5;
 background-color: rgba(86,61,124,.15);
 border: 1px solid #ddd;
 border: 1px solid rgba(86,61,124,.2);
 text-align: center;
}
div[role="main"] {
 background-color: #fff;
}
div[role="main"], nav, aside {
 height: 600px;
}

Agora com essa estrutura inicial, já podemos trabalhar apenas dentro do container para criar os nossos layouts.


Passo 3: Crie a marcação das três colunas

O layout de três colunas (em inglês, Three-Column Layout) é muito comum para sites grandes, como portais e e-commerce.

Trata-se de três colunas sendo uma maior que as outras duas, que podem ficar juntas ou separadas pelo conteúdo principal. Também é interessante manter os tamanhos equivalentes à proporção de ouro (em inglês, golden ratio), também conhecida como proporção áurea.

Veja como fica a marcação:

<div class="container">
    <header class="row">
        
    </header>
    <div class="row">
        <div role="main" class="col-md-6 col-md-push-3">
            
        </div>
        <aside role="complementary" class="col-md-3 col-md-push-3">
            
        </aside>
        <nav class="col-md-3 col-md-pull-9">
           
        </nav>
    </div>
    <footer class="row">
        
    </footer>
</div>

Também segue os padrões do layout fixo. Mas, agora adicionamos com dois sidebars, que ficam à direita e à esquerda do conteúdo.

Nesse layout, usamos combinações de classes para manter a semântica da página e para mover as partes menores para as laterais, usando as classes *-push e *-pull. Preste atenção nelas, porque podem ser muito úteis nos seus projetos, e evitam ter que escrever CSS.

Essas combinações de classes “empurram” a div main para o centro das 12 colunas, e “puxam” a barra lateral para a esquerda.

Por fim, você deve ter uma tela assim:

bootstrap-template-layout-threecolumn

 

Tranquilo?! Se tiver alguma dúvida, é só escrever aí nos comentários.

Até a próxima!

10 comentários sobre “Bootstrap 3: Template de Layout com Três Colunas

  1. Muito bom , muito obrigado!

  2. Muito bom, achei o que precisava para me tirar de uma enrascada!

  3. Pq não escrever na ordem “nav > main > complementary”, sem o uso dos “pull e push”?

    1. Para manter a semântica.

      O conteúdo mais importante deve vir antes na marcação HTML. Isso serve para SEO e, principalmente, para as tecnologias de acessibilidade (leitores de tela, etc.)
      Daí usamos o pull e push para posicionar apenas o visual.

      É possível fazer do jeito que você colocou, mas você perderia os benefícios que a semântica do HTML traz, e atrapalharia usuários com deficiência visual.

  4. Meu layout não ficou como na figura. As rows ficaram uma embaixo da outra.

    1. Vc deve estar acessando em uma tela pequena, não?

  5. As colunas do menu lateral, tanto no exemplo anterior quanto neste exemplo ficam uma em cima da outra, pesquisei no console, olhei o caminho dos arquivos, mas está dando errado :/

  6. Olá, estranhamente as colunas do menu lateral estão uma em cima da outra…

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *