Significado dos números em "col-md-4", "col-xs-1", "col-lg-2" no Bootstrap

Estou confuso com o sistema de grade no novo Bootstrap, particularmente estas classes:

col-lg-*
col-md-*
col-xs-*

(onde * representa algum número).

Alguém pode explicar o seguinte:

1. Como esse número está alinhando as grades?
2. Como usar esses números?
3. O que eles realmente representam?

Aplica-se apenas ao Bootstrap 3.

Ignorando as letras (x s , sm , md , lg ) por enquanto , começarei com apenas os números ...

• os números (1-12) representam uma parte da largura total de qualquer div
• todas as divs são divididas em 12 colunas
• portanto, col-*-6abrange 6 de 12 colunas (metade da largura), col-*-12abrange 12 de 12 colunas (toda a largura), etc.

Portanto, se você quiser duas colunas iguais para abranger uma div, escreva

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Ou, se você quiser que três colunas desiguais abranjam a mesma largura, escreva:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

Você notará que o número de colunas sempre soma 12. Pode ser menor que doze, mas tenha cuidado se for maior que 12, pois seus divs ofensivos serão exibidos na próxima linha (não .row, que é outra história).

Você também pode aninhar colunas dentro de colunas (melhor com um .rowinvólucro ao seu redor), como:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Cada conjunto de divs aninhados também abrange até 12 colunas da div pai. NOTA: Como cada .colclasse possui preenchimento de 15 pixels em ambos os lados, você deve agrupar colunas aninhadas em um.row agrupar , com margens de -15px. Isso evita a duplicação do preenchimento e mantém o conteúdo alinhado entre as classes de colunas aninhadas e não aninhadas.

- Você não perguntou especificamente sobre o xs, sm, md, lguso, mas eles andam de mãos dadas, então não posso deixar de tocá-lo ...

Em resumo, eles são usados ​​para definir em qual tamanho de tela essa classe deve ser aplicada:

• xs = telas pequenas extras (telefones celulares)
• sm = telas pequenas (tablets)
• md = telas médias (alguns desktops)
• lg = telas grandes (áreas de trabalho restantes)

Leia o " Opções da Grade " capítulo da documentação oficial Bootstrap para mais detalhes.

Normalmente, você deve classificar uma div usando várias classes de coluna, para que ela se comporte de maneira diferente, dependendo do tamanho da tela (este é o coração do que torna o bootstrap responsivo). por exemplo: uma div com classes col-xs-6e col-sm-4ocupará metade da tela no celular (xs) e 1/3 da tela em tablets (sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTA: como por comentário abaixo, aulas de grade para um determinado tamanho de ecrã se aplicam a esse tamanho de tela e maior a menos que outra declaração substituições ele (ou seja col-xs-6 col-md-4vãos 6 colunas sobre xs esm , e 4 colunas sobre md elg , embora sme lgnunca mais foram explicitamente declarado)

NOTA: se você não definir xs, o padrão será col-xs-12(ou seja, col-sm-6é metade da largura on sm, mde lgtelas, mas de largura total em xstelas).

OBSERVAÇÃO: é realmente muito bom se você .rowincluir mais de 12 cols, desde que você saiba como elas reagirão. - Esta é uma questão controversa, e nem todos concordam.

O sistema de grade do Bootstrap possui quatro classes:
xs (para telefones)
sm (para tablets)
md (para desktops)
lg (para desktops maiores)

As classes acima podem ser combinadas para criar layouts mais dinâmicos e flexíveis.

Dica: Cada classe aumenta de escala; portanto, se você deseja definir as mesmas larguras para xs e sm, é necessário especificar apenas xs.

OK, a resposta é fácil, mas continue lendo:

col-lg- significa coluna grande ≥ 1200px
col-md- significa coluna média ≥ 992px
col-xs- significa coluna extra pequena≥ 768px

Os números de pixels são os pontos de interrupção; portanto, por exemplo, o col-xsalvo é o elemento quando a janela é menor que 768 px (provavelmente dispositivos móveis) ...

Eu também criou a imagem abaixo para mostrar como funciona o sistema de grade, neste exemplos que eu usá-los com 3, como col-lg-6para mostrar como o trabalho sistema de grade na página, olhar em como lg, mde xssão sensíveis ao tamanho da janela:

O ponto principal é o seguinte:

col-lg-* col-md-* col-xs-* col-sm defina quantas colunas haverá nesses diferentes tamanhos de tela.

Exemplo: se você quiser que haja duas colunas nas telas da área de trabalho e nas telas do telefone, coloque duas col-md-6e duas col-xs-6classes em suas colunas.

Se você deseja que haja duas colunas nas telas da área de trabalho e apenas uma coluna nas telas do telefone (ou seja, duas linhas empilhadas umas sobre as outras), você coloca two col-md-6duas col-xs-12na coluna e, como soma será 24, elas serão empilhadas automaticamente em cima de cada outro, ou apenas deixe o xsestilo de fora.

Na documentação do Twitter Bootstrap :

• grade pequena (≥ 768px) = .col-sm-*,
• grade média (≥ 992px) = .col-md-*,
• grade grande (≥ 1200px) = .col-lg-*.

para ler mais ...

Aqui está

col-lg-2: se a tela for grande ( lg ), esse componente ocupará dois elementos, considerando que a linha inteira pode acomodar 12 elementos (então você verá que na tela grande esse componente ocupa 16% do espaço de uma linha)

col-lg-6: se a tela for grande ( lg ), esse componente ocupará 6 elementos, considerando que a linha inteira pode caber 12 elementos - quando aplicado, você verá que o componente ocupou metade do espaço disponível na linha.

A regra acima é aplicada apenas quando a tela é grande. quando a tela é pequena, essa regra é descartada e apenas um componente por linha é mostrado.

A imagem abaixo mostra várias larguras de tamanho de tela: