Sistema de grade 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 dependendo do tamanho da tela: em uma tela grande, pode parecer melhor com o conteúdo organizado em três colunas, mas em uma tela pequena seria melhor se os itens de conteúdo fossem empilhados em cima um do outro.
Dica: Lembre-se de que as colunas da grade devem somar até doze para uma linha. Mais do que isso, as colunas serão empilhadas independentemente da janela de visualização.
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.
Dica: Cada classe aumenta, então se você deseja definir as mesmas larguras para xs e sm, você só precisa especificar xs.
Regras do sistema de grade
Algumas regras do sistema de grade do Bootstrap:
- As linhas devem ser colocadas dentro de uma
.container(largura fixa) ou.container-fluid(largura total) para alinhamento e preenchimento adequados - Use linhas para criar grupos horizontais de colunas
- O conteúdo deve ser colocado dentro de colunas e somente as colunas podem ser filhas imediatas de linhas
- Classes predefinidas como
.rowe.col-sm-4estão disponíveis para criar layouts de grade rapidamente - As colunas criam calhas (lacunas entre o conteúdo da coluna) por meio de preenchimento. Esse preenchimento é deslocado em linhas para a primeira e última coluna por meio de margem negativa em
.rows - As colunas de grade são criadas especificando o número de 12 colunas disponíveis que você deseja abranger. Por exemplo, três colunas iguais usariam três
.col-sm-4 - As larguras das colunas estão em porcentagem, portanto, são sempre fluidas e dimensionadas em relação ao elemento pai
Estrutura Básica de uma Grade Bootstrap
A seguir está uma estrutura básica de uma grade Bootstrap:
<div class="container">
<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>
</div>
Então, para criar o layout desejado, crie um container ( <div
class="container">). Em seguida, 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.
Opções de grade
A tabela a seguir resume como o sistema de grade do Bootstrap funciona em vários dispositivos:
| Extra small <768px |
Small >=768px |
Medium >=992px |
Large >=1200px |
|
|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| Suitable for | Phones | Tablets | Small Laptops | Laptops & Desktops |
| Grid behaviour | Horizontal at all times | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints |
| Container width | None (auto) | 750px | 970px | 1170px |
| # of columns | 12 | 12 | 12 | 12 |
| Column width | Auto | ~62px | ~81px | ~97px |
| Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
| Nestable | Yes | Yes | Yes | Yes |
| Offsets | Yes | Yes | Yes | Yes |
| Column ordering | Yes | Yes | Yes | Yes |
Exemplos
Os próximos capítulos mostram exemplos de sistemas de grade para diferentes dispositivos:
- Empilhado para horizontal
- Dispositivos pequenos
- Dispositivos médios
- Dispositivos grandes
- Mais exemplos de grade