Sistema de Grade Bootstrap

O que é grade (Grid)?

Extrato da Wikipedia:

Em design gráfico, a grade é uma estrutura composta por uma série de linhas (verticais, horizontais) intersectantes usadas para organizar conteúdo (geralmente bidimensional). Ela é amplamente aplicada no design de impressão para layout e estrutura de conteúdo. Em design de página web, é um método para criar layouts consistentes rapidamente e usar HTML e CSS de maneira eficaz.

Em termos simples, a grade em design de página web é usada para organizar conteúdo, tornar o site fácil de navegar e reduzir a carga no lado do usuário.

O que é o sistema de grade Bootstrap (Grid System)?

A descrição do sistema de grade no documento oficial Bootstrap:

Bootstrap contém um sistema de grade responsivo, priorizado para dispositivos móveis e flexível, que pode se expandir apropriadamente para 12 colunas. Ele contém classes pré-definidas para opções de layout simples, bem como classes de mistura poderosas para geração de mais layouts semânticos.

Vamos entender a frase acima. Bootstrap 3 é priorizado para dispositivos móveis, em outros termos, o código Bootstrap começa com dispositivos de tela pequena (como dispositivos móveis, tablets) e se expande para componentes e grades em dispositivos de tela grande (como laptops, computadores de mesa).

Estratégia de prioridade para dispositivos móveis

• Conteúdo

• determina o que é mais importante.

• Layout

• Priorize o design de menor largura.

• O CSS básico é priorizado para dispositivos móveis, enquanto as consultas de mídia são para tablets e computadores de mesa.

• Progressiva melhoria

• ao aumentar o tamanho da tela, adicionando elementos.

O sistema de grade responsiva divide automaticamente em até12colunas.

Como funciona o sistema de grade Bootstrap (Grid System)

O sistema de grade cria a disposição da página através de uma série de linhas e colunas que contêm conteúdo. A seguir está listado como o sistema de grade Bootstrap funciona:

• As linhas devem ser colocadas em .container dentro da classe, para obter alinhamento (alignment) e preenchimento interno (padding) apropriados.

• Use linhas para criar grupos horizontais de colunas.

• O conteúdo deve ser colocado dentro das colunas e apenas as colunas podem ser elementos filhos diretos de uma linha.

• Classes pré-definidas de grade, como .row e .col-xs-4e pode ser usado para criar layouts de grade rapidamente. As classes de mistura LESS podem ser usadas para mais layouts semânticos.

• As colunas são criadas através do preenchimento interno (padding) para criar espaços entre o conteúdo das colunas. Este preenchimento interno é definido por .rows O margem externo (margin) negativo representa o deslocamento da linha para a primeira e a última coluna.

• O sistema de grade é criado especificando doze colunas disponíveis que você deseja cruzar. Por exemplo, para criar três colunas iguais, use três .col-xs-4.

Consultas de mídia

As consultas de mídia são um estilo de "regras CSS condicionais" muito elegantes. Eles se aplicam apenas a alguns CSS baseados em certas condições específicas. Se essas condições forem atendidas, o estilo correspondente é aplicado.

As consultas de mídia no Bootstrap permitem que você mova, exiba e oculte conteúdo com base no tamanho da viewport. As consultas de mídia a seguir são usadas em arquivos LESS, para criar os pontos de quebra de threshold críticos no sistema de grade do Bootstrap.

/*　Dispositivo ultra-pequeno (celular, menor que　768(px)　*/
/*　Não há consultas de mídia padrão no Bootstrap　*/
/*　Dispositivo de tamanho pequeno (tablet,768px a partir de)　*/
@media (min-width: @screen-sm-@media (min
/*　Dispositivo de tamanho médio (computador de mesa,992px a partir de)　*/
@media (min-width: @screen-md-@media (min
/*　Dispositivo grande (grande computador de mesa,1200px a partir de)　*/
@media (min-width: @screen-lg-@media (min

Às vezes também incluímos no código de consulta de mídia max-widthassim limitando o impacto do CSS a tamanhos de tela menores.

@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-@media (min

As consultas de mídia têm duas partes, primeiro uma especificação de dispositivo, seguida por uma regra de tamanho. No caso acima, foram definidas as seguintes regras:

Vamos olhar para a seguinte linha de código:

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }

Para todos os que têm min-width: @screen-sm-min do dispositivo, se a largura da tela for menor que @screen-sm-maxserão realizadas algumas tratativas.

Opções de grade

A tabela a seguir resume como o sistema de grade do Bootstrap funciona em vários dispositivos:

Estrutura básica da grade

Abaixo está a estrutura básica da grade do Bootstrap:

<div>
　　　<div>
　　　　　　<div></div>
　　　　　　<div></div>　　　　　　
　　　</div>
　　　<div>.../div>
</div>
<div>....

Vamos olhar para alguns exemplos de grid simples:

• Exemplo: horizontal empilhado

• Exemplo: dispositivos de tamanho médio e grande

• Exemplo: celular, tablet, computador de mesa

restabelecimento de colunas responsivas

Os seguintes exemplos incluem4um grid, mas ao navegar em dispositivos pequenos, não podemos determinar a posição de exibição do grid.

Para resolver este problema, pode-se usar .clearfix classe e utilitários　responsoíveispara resolver, conforme o exemplo a seguir:

Exemplo online

<!DOCTYPE html>
<html>
<head>
　　　<meta　charset="utf-8">　
　　　<title>Exemplo Bootstrap　-　colunas　responsoíveis/title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<div　class="row"　>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Juntos, vamos nos sentar aqui, benzer nossos amantes.</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;caixa-sombra:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Eu te rezarei, que você seja sempre feliz. Meu trabalho e meu trabalho são acidentais. Eu tenho apenas um pouco de coragem, vou fazer um estágio no laboratório, isso é uma consequência.
　　　　　　　　　</p>
　　　　　　　　　<p>Juntos, vamos nos sentar, benzer nossos amigos, benzer-nos.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div　class="clearfix　visible-xs"></div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-sombra:inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Com um pouco de tempo, você pode completar o estágio.
　　　　　　　　　</p>
　　　　　　</div>
　　　　　　<div　class="col-xs-6　col-sm-3"　
　　　　　　　　　style="background-color:　#dedef8;caixa-sombra:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Trabalho e sofrimento, cheio de energia, então, têm alguns modelos de longa vida. Até esses anos.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

mudar o tamanho da janela da navegador para ver as mudanças, ou ver o efeito no seu telefone.

colunas　deslocadas

deslocamento é uma funcionalidade útil para layout mais profissional. Elas podem ser usadas para dar mais espaço às colunas. Por exemplo,.col-xs-* classe não suporta deslocamento, mas pode simplesmente ser alcançado usando uma célula vazia.

para usar o deslocamento em monitores de grande tela, use .col-md-deslocamento-* classe. Essas classes aumentam a margem externa esquerda (margin) de uma coluna * colunas, onde * O intervalo é de 1 até 11.

Neste exemplo, temos <div>..</div>，vamos usar .col-md-deslocamento-3 class para centralizar este div.

Exemplo online

<!DOCTYPE html>
<html>
<head>
　　　<meta　charset="utf-8">　
　　　<title>Exemplo Bootstrap　-　colunas　deslocadas</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Olá, mundo!</h1>
　　　<div　class="row"　>
　　　　　　<div　class="col-md-6　col-md-deslocamento-3"　
　　　　　　　　　style="background-color:　#dedef8;caixa-sombra:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<p>Lorem　ipsum　dolor　sit　amet,　consectetur　adipisicing　
　　　　　　　　　　　　elit.
　　　　　　　　　</p>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Os resultados são exibidos a seguir:

coluna　aninhada

para aninhar a grade padrão no conteúdo, adicione uma nova .rowem uma .col-md-* colunas. Adicione um grupo .col-md-* colunas. A linha aninhada deve conter um grupo de colunas, o número dessas colunas não pode exceder12(Na verdade, não há exigência de que você preencha12colunas).

Neste exemplo, o layout tem duas colunas, a segunda coluna está dividida em duas linhas e quatro caixas.

Exemplo online

<!DOCTYPE html>
<html>
<head>
　　　<meta　charset="utf-8">　
　　　<title>Exemplo Bootstrap　-　coluna　aninhada</title>
　　　<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
　　　<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
　　　<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Olá, mundo!</h1>
　　　<div class="row">
　　　　　　<div　class="col-md-3" style="background-color:　#dedef8;caixa-sombra:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<h4>primeira　coluna</h4>
　　　　　　　　　<p>Lorem　ipsum　dolor　sit　amet,　consectetur　adipisicing　elit.</p>
　　　　　　</div>
　　　　　　<div　class="col-md-9" style="background-color:　#dedef8;caixa-sombra:　
　　　　　　　　　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　<h4>segunda　coluna　-　dividido　em　quatro　caixas</h4>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>Consectetur　art　party　Tonx　culpa　semiotics.　Pinterest　
　　　　　　　　　　　　　　　　　　assumenda　minim　organic　quis.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>　sed　do　eiusmod　tempor　incididunt　ut　labore　et　dolore　magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim veniam, quis nostrud exercitation　
　　　　　　　　　　　　　　　　　　ullamco laboris nisi ut aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　　　　<div class="row">
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>quis nostrud exercitation ullamco laboris nisi ut　
　　　　　　　　　　　　　　　　　　aliquip ex ea commodo consequat.
　　　　　　　　　　　　　　　</p>
　　　　　　　　　　　　</div>　　　
　　　　　　　　　　　　<div　class="col-md-6" style="background-color: #B18904;
　　　　　　　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　　　　　　　<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,　
　　　　　　　　　　　　　　　　　　sed do eiusmod tempor incididunt ut labore et dolore magna　
　　　　　　　　　　　　　　　　　　aliqua. Ut enim ad minim./p>
　　　　　　　　　　　　</div>
　　　　　　　　　</div>
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Os resultados são exibidos a seguir:

Ordenação de colunas

Outra perfeita característica do sistema de grid do Bootstrap é que você pode facilmente escrever colunas em uma ordem e exibi-las em outra.

Você pode facilmente alterar as colunas com .col-md-push-* e .col-md-pull-* ordem interna das colunas da classe grid, onde * O intervalo é de 1 até 11.

Neste exemplo, temos um layout de duas colunas, onde a esquerda é muito estreita, servindo como barra lateral. Usaremos .col-md-push-* e .col-md-pull-* Classe para trocar a ordem dessas duas colunas.

Exemplo online

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Exemplo Bootstrap　-　Ordenação de colunas</title>
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">　　
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
　　　<h1>Olá, mundo!</h1>
　　　<div class="row">
　　　　　　<p>Antes da ordenação</p>
　　　　　　<div　class="col-md-4" style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　Estou à esquerda
　　　　　　</div>
　　　　　　<div　class="col-md-8" style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444, inset　-1px　1px　1px　#444>
　　　　　　　　　Estou à direita
　　　　　　</div>
　　　</div><br>
　　　<div class="row">
　　　　　　<p>Ordenado</p>
　　　　　　<div　class="col-md-4　col-md-push-8"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444>
　　　　　　　　　Estou à esquerda
　　　　　　</div>
　　　　　　<div　class="col-md-8　col-md-pull-4"　
　　　　　　　　　style="background-color:　#dedef8;
　　　　　　　　　box-shadow:　inset　1px　-1px　1px　#444,　
　　　　　　　　　inset　-1px　1px　1px　#444>
　　　　　　　　　Estou à direita
　　　　　　</div>
　　　</div>
</div>
</body>
</html>

Os resultados são exibidos a seguir: