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 em “Bootstrap 3: Template de Layout com Três Colunas

Adicione o seu

    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.

  1. “Excelente conteúdo. Show de bola mesmo. Mas eu gostaria de APRENDER a fazer um sistema de COMENTARIOS em Bootstrap tipo este para colocar em meu site. Se alguem tiver este material e quiser me VENDER esta aula eu compro tá.
    Marcus – SL – RS ”
    E-mail: [email protected]

  2. 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 :/

Deixe um comentário

Orgulhosamente feito com WordPress | Tema: Baskerville 2 por Anders Noren

Acima ↑