Layout em Bootstrap 2

Ol
pessoal,
bom
dia!
Neste tutorial iremos comear a estruturar o contedo, sidebar e footer.
Essa a base fundamental no desenvolvimento de layout em bootstrap.
Vamos l!
Caso ainda no tenha lido os artigos anteriores, acesse:

O que Bootstrap?

Bootstrap Grid System

Criando layout em Bootstrap parte 1

DIVIDINDO O CONTEDO
Aula passada ns conheamos e desenvolvemos o navbar (menu superior).
Abaixo do menu superior ns temos as reas:

contedo

sidebar

footer
Mos a obra!
Abaixo do fechamento da tag nav, digite o cdigo abaixo.
Dividindo o conteudo

1 ...
2 </nav> <!-- Fim do menu superior -->
3
4 <!-- Aqui comea o conteudo -->

5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2

<div class="wrapper" role="main">

<div class="container">
<div class="row">
<div id="conteudo" class="col-md-9"></div> <!-- Aqui e a area
do conteudo -->
<div id="sidebar" class="col-md-3"></div> <!-- Aqui e a area do
sidebar ->
</div>
</div>
</div> <!-- Fim do conteudo -->
<footer> <!-- Aqui e a area do footer -->
<div class="container">
<div class="row">
<div id="linksImportantes" class="col-md-3"></div> <!-- Aqui e a
area dos links importantes -->
<div id="redesSociais" class="col-md-3"></div> <!-- Aqui e a
area das redes sociais -->
<div id="logoFooter" class="col-md-offset-3 col-md-3"></div>
<!-- Aqui e a area da logo do rodape -->
</div>
</div>
</footer>

Complicou o raciocnio? Espera que ns vamos destrinchar esse cdigo

todinho e analisar item por item. Ok?

ANALISANDO O CDIGO
Prestem bastante ateno na explicao dos tens que falam sobre
o container e a row.
<div class=wrapper role=main>: Esse elemento no padro do
bootstrap. Somente acrescentei para poder ter um controle melhor dos
elementos internos do contedo do site. Ele engloba o contedo e o sidebar
deixando o menu superior e o rodap separados.
<div class=container>: Esse elemento padro do bootstrap e uma das
classes mais utilizadas e importantes do framework. Com ela informamos que a
partir daquele elemento ns teremos um container que possui largura
especfica e que se adapta com relao a resoluo do navegador.
Deem uma observada no cdigo e percebam que essa classe chamada 3
vezes: no
navbar,
outra
no
contedo
e
no
footer.
Sem essa classe ns deixamos de limitar a largura do site, sem falar que a falta
dela
pode
acarretar
alguns
problemas
no
layout.

Portanto, sempre que for criar uma nova rea que engloba as colunas, deve-se
invocar
essa
classe.
OBS: A classe container chamada somente uma vez por rea
<div class=row>: Esse elemento padro do bootstrap e bastante
importante para o framework. Ela faz parceria com o container.
Se vocs entenderam bem o conceito de Grid System da aula BOOTSTRAP
3.0 GRID SYSTEM, ento vai ser fcil compreender o sentido do row.
O container cria um quadrado imaginrio em volta dos elementos e o row,
que fica sempre dentro do container, divide esse quadrado em linhas.
Vejam abaixo como funciona, em forma de ilustrao, as classes container e
row.
Container

Row

Se j temos o container e as linhas, agora s faltam as colunas, correto?

<div class=col-md-?>: Como visto na aula BOOTSTRAP 3.0 GRID
SYSTEM, as divs que possuem classes como col-md-9 / col-sm-? / col-lg-? e
etc, so identificadas como colunas. O md indica que quando o site estiver
sendo visualizado em resoluo maior ou igual a 992px, aquele elemento ter o
nmero
de
colunas
identifica
pela
classe
col-md-numero.

Portanto, em nosso exemplo o contedo ter 9 colunas na resoluo md e o

sidebar ter 3 colunas.
<footer>: Tag do html5 que identifica que aquele bloco ser reconhecido como
o rodap do site.
<div class=col-md-ofset-3 col-md-3>: Esse elemento estou destacando
somente por causa da classe col-md-offset-3. O col-md vocs j sabem o
que significa. O offset-3 indica que aquele elemento ser empurrado 3
colunas para a direita.

CONTAINER, ROW E COLUNAS

IMPORTANTE: Todo container ter no mnimo 1 row e toda row ter no
mximo 12 colunas.
Como eu disse anteriormente, a compreenso desses 3 elementos muito
importante.
Se estivermos desenvolvendo um layout em 12 colunas, toda row que
criarmos dever ter no mximo 12 colunas. Caso ultrapasse a quantidade de
colunas, o layout vai ficar quebrado e a ultima coluna vai cair.

Container,

Row

Seguindo
esse
Ser
que

possvel
ter
row
Ser que possvel ter colunas dentro de colunas?

Colunas

dentro

princpio:
de
row?

Claro que SIM!

EST GOSTANDO DESTE ARTIGO?

Ento no deixe de compartilhar com seus amigos. Ajude a Tutorial Web Design a
crescer ainda mais.

43

Lembra que eu disse que toda row deve ter no mximo 12 colunas?

Se eu tenho um bloco de 9 colunas, eu posso ter dentro desse bloco outra

row com 12 colunas.
Deu para entender?
Vamos ver um exemplo:
Coluna dentro de coluna

1
2
3
4
5
6
7
8
9
1
0
1
1
1
2
1
3
1
4
1
5
1
6
1
7
1
8
1
9
2
0
2
1
2
2
2
3
2
4
2
5

<div class="wrapper" role="main">

<div class="container">
<div class="row">
<div id="conteudo" class="col-md-9" style="background-color:
#ccc; height: 200px; border: 1px solid red">
<p>Aqui o conteudo pai com 9 colunas</p>
<div class="row">
<div class="col-md-6" style="background-color:
#999; height: 155px; border: 1px solid red">
Aqui o contedo filho com 6 colunas</p>
<div class="row">
<div class="col-md-5"
style="background-color: #333; height: 100px; color: #fff; border: 1px solid red"
><p>Aqui contedo neto com 5 colunas</p></div>
<div class="col-md-7"
style="background-color: #333; height: 100px; color: #fff; border: 1px solid
red"><p>Aqui contedo neto com 7 colunas</p></div>
</div>
</div>
<div class="col-md-6" style="background-color:
#fff; height: 155px; border: 1px solid red">
<p>Aqui o contedo filho com 6
colunas</p>
</div>
</div>
</div>
<div id="sidebar" class="col-md-3" style="background-color:
#333; height: 200px; border: 1px solid red; color: #fff">
<p>Aqui o sidebar</p>
</div>
</div>
</div>
</div> <!-- Fim do conteudo -->

Resultado:

Row

Colunas

Row

Colunas

Percebeu que toda vez que eu criei uma nova camada de colunas eu as
coloquei dentro de um elemento com a classe row?
Esse que o esquema!
Se voc compreender esse esquema de row e colunas voc j vai ter 60%
mais de facilidade em desenvolver layouts com bootstrap.
Agora que j estamos com a estrutura do layout j desenvolvida, s
incrementar com os elementos adicionais.
Tente desenvolver o layout abaixo. Caso tenha dificuldade,
disponibilizando o arquivo para download no final deste tutorial.

estou

Layout

final

FINALIZANDO
Pessoal,
o
incio
de
um
projeto
bootstrap

esse.
Caso tenham entendido vocs j esto mais do que meio caminho andado.
Aula que vem irei ensinar alguns detalhes a mais e irei desenvolver todo o
layout acima com vocs.
Entrem no site do bootstrap e no deixem de estudar.
Espero que tenham gostado.
Caso tenha ficado alguma dvida, me coloco a disposio.
Comente se gostaram. A ateno de vocs muito importante pra TWD.
Muito obrigado e at mais!
VISUALIZAR
Visualizar
DOWNLOAD
layout_bootstrap

LAYOUT