Grades de inicialização
Sistema de grade de inicialização
O sistema de grade do Bootstrap permite até 12 colunas na página.
Se você não quiser usar todas as 12 colunas individualmente, poderá agrupar as colunas para criar colunas mais amplas:
| período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 | período 1 |
| período 4 | período 4 | período 4 | |||||||||
| período 4 | período 8 | ||||||||||
| período 6 | período 6 | ||||||||||
| período 12 | |||||||||||
O sistema de grade do Bootstrap é responsivo e as colunas serão reorganizadas automaticamente dependendo do tamanho da tela.
Classes de grade
O sistema de grade Bootstrap tem quatro classes:
xs(para telefones - telas com menos de 768px de largura)sm(para tablets - telas iguais ou maiores que 768px de largura)md(para laptops pequenos - telas iguais ou maiores que 992px de largura)lg(para laptops e desktops - telas iguais ou maiores que 1200px de largura)
As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.
Estrutura Básica de uma Grade Bootstrap
A seguir está uma estrutura básica de uma grade Bootstrap:
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
<div class="col-*-*"></div>
<div class="col-*-*"></div>
<div class="col-*-*"></div>
</div>
<div class="row">
...
</div>
Primeiro; crie uma linha ( <div
class="row">). Em seguida, adicione o número desejado de colunas (tags com
.col-*-*classes apropriadas). Observe que os números .col-*-*devem sempre somar 12 para cada linha.
Abaixo, coletamos alguns exemplos de layouts básicos de grade do Bootstrap.
Três Colunas Iguais
O exemplo a seguir mostra como obter três colunas de largura igual começando em tablets e dimensionando para desktops grandes. Em telefones celulares ou telas com menos de 768 pixels de largura, as colunas serão empilhadas automaticamente:
Exemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
Duas colunas desiguais
O exemplo a seguir mostra como obter duas colunas de várias larguras começando em tablets e dimensionando para grandes desktops:
Exemplo
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-8">.col-sm-8</div>
</div>
Dica: Você aprenderá mais sobre as grades do Bootstrap posteriormente neste tutorial.