Bootstrap Sistema Interligado
Bootstrap's sistema de rede permite que até 12 colunas ao longo da página.
Se você não quiser usar todos os 12 coluna individualmente, você pode agrupar as colunas em conjunto para criar colunas mais amplas:
| extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 | extensão 1 |
| tempo de 4 | tempo de 4 | tempo de 4 | |||||||||
| tempo de 4 | extensão 8 | ||||||||||
| extensão 6 | extensão 6 | ||||||||||
| período de 12 | |||||||||||
Bootstrap's sistema de rede é sensível, e as colunas serão re-organizar, dependendo do tamanho da tela: Em uma tela grande que pode ficar melhor com o conteúdo organizado em três colunas, mas em uma tela pequena que seria melhor se os itens de conteúdo foram empilhados em cima uns dos outros.
Dica: Lembre-se que colunas de grade deve adicionar até doze para uma linha. Mais do que isso, as colunas serão empilhados, não importa a viewport .
Classes de grade
O Bootstrap sistema de rede tem quatro classes:
- xs (por telefone)
- sm (para tablets)
- md (para desktops)
- lg (para desktops maiores)
As classes acima podem ser combinadas para criar esquemas mais dinâmicos e flexíveis.
Dica: Cada classe é dimensionado para cima, por isso, se você deseja definir as mesmas larguras de xs e sm , você só precisa especificar xs .
Regras sistema de grade
Alguns Bootstrap regras do sistema de rede:
- Linhas devem ser colocados dentro de um
.container(com largura fixa) ou.container-fluid(largura total) para o alinhamento e preenchimento adequado - Use linhas para criar grupos horizontais de colunas
- O conteúdo deve ser colocado dentro de colunas e colunas só podem ser crianças imediatas de linhas
- Classes predefinidas como
.rowe.col-sm-4estão disponíveis para fazer rapidamente layouts de grade - Colunas criar calhas (lacunas entre o conteúdo da coluna) por meio de preenchimento. Que o preenchimento é compensado em filas para a primeira e última coluna através de margem negativa na
.rows - colunas de grade são criados por especificando o número de 12 colunas disponíveis que você deseja estender. Por exemplo, três colunas iguais usaria três
.col-sm-4
Estrutura de base de um Bootstrap Grade
O que se segue é uma estrutura básica de um Bootstrap grade:
<div class="container">
<div
class="row">
<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, criar um recipiente ( <div class="container"> ). Em seguida, crie uma linha ( <div class="row"> ). Em seguida, adicione o número desejado de colunas (tags com adequada .col-*-* classes). Note que os números em .col-*-* deve sempre adicionar até 12 para cada linha.
Opções de grade
A tabela a seguir resume como a Bootstrap sistema de rede funciona em vários dispositivos:
| Extra small devices Phones (<768px) |
Small devices Tablets (>=768px) |
Medium devices Desktops (>=992px) |
Large devices Desktops (>=1200px) |
|
|---|---|---|---|---|
| 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 |
| Class prefix | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| Number 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 mostra exemplos de sistemas de rede para diferentes dispositivos: