O sistema de grade padrão fornecido como parte do Bootstrap é uma grade de 12 colunas e 940px de largura .

Ele também possui quatro variações responsivas para vários dispositivos e resoluções: telefone, retrato de tablet, paisagem de mesa e desktops pequenos e desktops widescreen grandes.

<div class = "linha" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Conforme mostrado aqui, um layout básico pode ser criado com duas "colunas", cada uma abrangendo um número das 12 colunas fundamentais que definimos como parte de nosso sistema de grade.

Com o sistema de grade estático (não fluido) no Bootstrap, o aninhamento é fácil. Para aninhar seu conteúdo, basta adicionar um novo .rowe conjunto de .span*colunas dentro de uma .span*coluna existente.

Exemplo

<div class = "linha" > 
  <div class = "span12" > 
    Nível 1 da coluna
    <div class = "linha" > 
      <div class = "span6" > Nível 2 </div> 
      <div class = "span6" > Nível 2 </div> 
    </div>
  </div>
</div>

Variáveis ​​em MENOS

Construído no Bootstrap há um punhado de variáveis ​​para personalizar o sistema de grade padrão de 940px, documentado acima. Todas as variáveis ​​para a grade são armazenadas em variables.less.

Como personalizar

Modificar a grade significa alterar as três @grid*variáveis ​​e recompilar o Bootstrap. Altere as variáveis ​​da grade em variables.less e use uma das quatro maneiras documentadas para recompilar . Se você estiver adicionando mais colunas, certifique-se de adicionar o CSS para aquelas em grid.less.

Mantendo-se responsivo

A personalização da grade funciona apenas no nível padrão, a grade de 940px. Para manter os aspectos responsivos do Bootstrap, você também terá que customizar as grades em responsivo.less.

Layout fixo

O layout centralizado padrão e simples de 940px de largura para praticamente qualquer site ou página fornecido por um único arquivo <div class="container">.

<corpo>
  <div class = "contêiner" > 
    ...
  </div>
</body>

Layout fluido

<div class="container-fluid">oferece estrutura de página flexível, larguras mínima e máxima e uma barra lateral esquerda. É ótimo para aplicativos e documentos.

<div class = "contêiner-fluido" > 
  <div class = "fluido de linha" > 
    <div class = "span2" > 
      <!--Conteúdo da barra lateral-->
    </div>
    <div class = "span10" > 
      <!--Conteúdo do corpo-->
    </div>
  </div>
</div>

Dispositivos suportados

O Bootstrap suporta várias consultas de mídia para ajudar a tornar seus projetos mais apropriados em diferentes dispositivos e resoluções de tela. Aqui está o que está incluído:

O que eles fazem

As consultas de mídia permitem CSS personalizado com base em várias condições - proporções, larguras, tipo de exibição etc. - mas geralmente se concentram em min-widthe max-width.

• Modifique a largura da coluna em nossa grade
• Empilhe elementos em vez de flutuar sempre que necessário
• Redimensione títulos e texto para serem mais apropriados para dispositivos

O Bootstrap não inclui automaticamente essas consultas de mídia, mas entendê-las e adicioná-las é muito fácil e requer configuração mínima. Você tem algumas opções para incluir os recursos responsivos do Bootstrap:

1. Use a versão responsiva compilada, bootstrap-responsive.css
2. Adicione @import "responsive.less" e recompile o Bootstrap
3. Modifique e recompile o arquivo responsivo.less como um arquivo separado

Por que não apenas incluí-lo? Verdade seja dita, nem tudo precisa ser responsivo. Em vez de incentivar os desenvolvedores a remover esse recurso, achamos melhor habilitá-lo.

  // Telefones paisagem e para baixo
  @media ( largura máxima : 480px ) { ... } _     
 
  // Telefone paisagem para tablet retrato
  @media ( max - width : 768px ) { ... }     
 
  // Tablet retrato para paisagem e desktop
  @media ( min - width : 768px ) e ( max - width : 940px ) { ... }        
 
  // Área de trabalho grande
  @media ( largura mínima : 1200px ) { .. } _