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 automaticamente, dependendo do tamanho da tela.
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.
Estrutura de base de um Bootstrap Grade
O que se segue é uma estrutura básica de um Bootstrap grade:
<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> Primeiro; criar 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.
Abaixo temos recolhido alguns exemplos de básicos Bootstrap layouts de grade.
Três colunas iguais
O exemplo a seguir mostra como obter um três colunas de igual largura a partir de comprimidos e de escala para grandes áreas de trabalho. Em telefones celulares, as colunas serão empilhados 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> Tente você mesmo " Duas colunas desiguais
O exemplo a seguir mostra como obter duas colunas diferentes de largura a partir de comprimidos e escalar a grandes áreas de trabalho:
Exemplo
<div class="row">
<div
class="col-sm-4">.col-sm-4</div>
<div
class="col-sm-8">.col-sm-8</div>
</div> Tente você mesmo " Dica: Você vai aprender mais sobre Bootstrap grades, mais adiante neste tutorial.