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!

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

Acima ↑