Blog do Programador: Como funciona o layout do Twitter Bootstrap

O Bootstrap trabalha com um sistema de grid em seu layout.

O sistema é prioritário para dispositivos móveis, como celulares, e é expansível para dispositivos maiores, como tablets, notebook, desktops.

Opções do Grid

Regras do Grid

As linhas do grid devem ser colocadas dentro de classes .container.
Use linhas para criar grupos horizontais de colunas.
Os conteúdos devem ser colocados dentro de colunas, e somente colunas podem ser imediatamente herdeiras (filhas) de linhas. Não usar linha após linha, sem preenchê-las com colunas.
Há um espaçamento entre as colunas de 30px (15px de cada lado de uma coluna).
O grid apresenta 12 colunas. Ao dividir o conteúdo de uma linha em colunas, deve-se atentar para que a soma de onze. Exemplo: ao dividir a linha em duas colunas, pode-se usar duas vezes a classe .col-sm-6 (6+6=12).

Estrutura básica do grid

Exemplo 1

Exemplo 2

<!DOCTYPE html>
class="container">
        <div class="row" style="border:solid; border-width:1px; background-color:#b9b3b3">
            <div class="col-sm-4">
                <p>
<strong>Equipamentos</strong>
                </p>
</div>
<div class="col-sm-2">
                <p>
<strong>Extra Pequenos - Celulares (<768px)</strong>
                </p>
</div>
<div class="col-sm-2">
                <p>
<strong>Pequenos - Tablets (>=768px)</strong>
                </p>
</div>
<div class="col-sm-2">
                <p>
<strong>Médios - Desktops (>=992x)</strong>
                </p>
</div>
<div class="col-sm-2">
                <p>
<strong>Grandes - Desktops (>=1200px)</strong>
                </p>
</div>
</div>
<div class="row" style="border:solid; border-width:1px; border-top:none;
                                                background-color:#e4dede">
            <div class="col-sm-4">
                <p>
Máx. Tamanho Container
                </p>
</div>
<div class="col-sm-2">
                <p>
Nenhum (auto)
                </p>
</div>
<div class="col-sm-2">
                <p>
750px
                </p>
</div>
<div class="col-sm-2">
                <p>
970px
                </p>
</div>
<div class="col-sm-2">
                <p>
1170px
                </p>
</div>
</div>
<div class="row" style="border:solid; border-width:1px; border-top:none;
                                                background-color:#e4dede">
            <div class="col-sm-4">
                <p>
Prefixo da classe
                </p>
</div>
<div class="col-sm-2">
                <p>
.col-xs-
                </p>
</div>
<div class="col-sm-2">
                <p>
.col-sm-
                </p>
</div>
<div class="col-sm-2">
                <p>
.col-md-
                </p>
</div>
<div class="col-sm-2">
                <p>
.col-lg-
                </p>
</div>
</div>
<div class="row" style="border:solid; border-width:1px; border-top:none;
                                                background-color:#e4dede">
            <div class="col-sm-4">
                <p>
Máx. Tamanho Coluna
                </p>
</div>
<div class="col-sm-2">
                <p>
Auto
                </p>
</div>
<div class="col-sm-2">
                <p>
60px
                </p>
</div>
<div class="col-sm-2">
                <p>
78px
                </p>
</div>
<div class="col-sm-2">
                <p>
95px
                </p>
</div>
</div>
</div>

sábado, 17 de outubro de 2015

Como funciona o layout do Twitter Bootstrap

Nenhum comentário:

Postar um comentário