Bootstrap 3: Template de Layout Duas 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-twocolumn

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 duas colunas

O layout de duas colunas (em inglês, Two-Column Layout) é um dos mais comuns para sites menores e para blogs.

Trata-se de, simplesmente, duas colunas sendo uma maior que a outra. O normal é que os tamanhos sejam 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-8">
            
        </div>
        <aside role="complementary" class="col-md-4">
            
        </aside>
    </div>
    <footer class="row">
        
    </footer>
</div>

Também bastante parecida com o layout fixo. Mas, agora adicionamos um sidebar, que fica à direita do conteúdo.

Por fim, você deve ter uma tela assim:

bootstrap-template-layout-twocolumn

Se você precisar mudar o sidebar para a esquerda da tela, basta usar uma combinação de classes, com push e pull:

<div class="row">
    <div role="main" class="col-md-8 col-md-push-4">
            
    </div>
    <aside role="complementary" class="col-md-4 col-md-pull-8">
           
    </aside>
</div>

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 Duas Colunas

Adicione o seu

    1. Modificar o nav do Bootstrap é um pouco trabalhoso, mas nada impossível.

      Use o Dev Tools do Chrome (tecla F12) para ver as classes e ir modificando.

      Depois, você deve criar um arquivo CSS para sobrescrever essas classes.

    1. Verifica se os caminhos para os js e css estão no teu html.
      Se estiverem errados as colunas vão ficar uma sobre a outra mesmo.

      Outra dica é abre o console do navegador. No chrome: botão direito sobre a pagina, Inspect ou Inspecionar, vai abrir uma janela na parte de baixo do navegador, vai na aba console. Recarrega a página e vê se aparece algum erro no console.

  1. Pelo que percebi o bootstrap trata as colunas com um tamanho padrão em pixels. É possível personalizar este tamanho, ou seja, definir o col-md-1 com um tamanho diferente do padrão definido pelo bootstrap?

    1. Na verdade, o tamanho é definido em percentuais. Por exemplo: .col-md-6 é 50% da linha, e .col-md-1 seria 8,333…%
      Dependendo do tamanho da tela é que são calculados esses pixels, sobre o percentual.

      É possível alterar isso criando uma nova build do Bootstrap, fazendo um grid system personalizado.

  2. ola eu gostaria de saber se teria um jeito de tar um espaçamento entre “aside role” e o “div role” ,a fim de criar um menu lateral um pouco separado do Conteúdo (OBS: primeiro contato com Bootstrap)

Deixe um comentário

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

Acima ↑