O sistema de grade predeterminado que se proporciona como parte de Bootstrap é unha grade de 940 píxeles de ancho e 12 columnas .

Tamén ten catro variacións sensibles para varios dispositivos e resolucións: teléfono, retrato da tableta, paisaxe de mesa e escritorios pequenos e escritorios de pantalla ancha grande.

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

Como se mostra aquí, pódese crear un deseño básico con dúas "columnas", cada unha que abrangue un número das 12 columnas fundamentais que definimos como parte do noso sistema de cuadrícula.

Co sistema de reixa estática (non fluída) en Bootstrap, a anidación é sinxela. Para aniñar o teu contido, só tes que engadir unha columna nova .rowe un conxunto de columnas dentro dunha columna .span*existente ..span*

Exemplo

<div class = "fila" > 
  <div class = "span12" > 
    Nivel 1 da columna
    <div class = "fila" > 
      <div class = "span6" > Nivel 2 </div> 
      <div class = "span6" > Nivel 2 </div> 
    </div>
  </div>
</div>

Variables en MENOS

En Bootstrap hai un puñado de variables para personalizar o sistema de grade predeterminado de 940px, documentado anteriormente. Todas as variables da grella almacénanse en variables.less.

Como personalizar

Modificar a grade significa cambiar as tres @grid*variables e recompilar Bootstrap. Cambia as variables da grella en variables.less e utiliza unha das catro formas documentadas para recompilar . Se estás engadindo máis columnas, asegúrate de engadir o CSS para aqueles en grid.less.

Manterse receptivo

A personalización da grade só funciona no nivel predeterminado, a grade de 940 px. Para manter os aspectos sensibles de Bootstrap, tamén terás que personalizar as cuadrículas en responsive.less.

Disposición fixa

O deseño predeterminado e sinxelo de 940 píxeles de ancho e centrado para case calquera sitio web ou páxina proporcionado por un único ficheiro <div class="container">.

<corpo>
  <div class = "contedor" > 
    ...
  </div>
</corpo>

Disposición de fluídos

<div class="container-fluid">dá unha estrutura de páxina flexible, anchos mínimos e máximos e unha barra lateral esquerda. É xenial para aplicacións e documentos.

<div class = "container-fluid" > 
  <div class = "fila-fluído" > 
    <div class = "span2" > 
      <!--Contido da barra lateral-->
    </div>
    <div class = "span10" > 
      <!--Contido corporal-->
    </div>
  </div>
</div>

Dispositivos compatibles

Bootstrap admite un puñado de consultas multimedia para axudar a que os teus proxectos sexan máis apropiados en diferentes dispositivos e resolucións de pantalla. Aquí tes o que se inclúe:

O que fan

As consultas multimedia permiten CSS personalizados en función dunha serie de condicións (proporcións, anchos, tipo de visualización, etc.), pero normalmente céntrase en min-widthe max-width.

• Modifica o ancho da columna na nosa grella
• Apila elementos en lugar de flotar onde sexa necesario
• Cambia o tamaño dos títulos e do texto para que sexan máis axeitados para os dispositivos

Bootstrap non inclúe automaticamente estas consultas multimedia, pero comprendelas e engadilas é moi sinxelo e require unha configuración mínima. Tes algunhas opcións para incluír as funcións de resposta de Bootstrap:

1. Use a versión responsive compilada, bootstrap-responsive.css
2. Engade @import "responsive.less" e recompile Bootstrap
3. Modificar e recompilar responsive.less como un separado

Por que non simplemente incluílo? A verdade, non todo ten que responder. En lugar de animar aos desenvolvedores a eliminar esta función, pensamos que é mellor activala.

  // Paisaxe teléfonos e abaixo
  @media ( ancho máximo : 480 píxeles ) { ... }     
 
  // Teléfono horizontal para tableta vertical
  @media ( ancho máximo : 768 píxeles ) { ... }     
 
  // Vertical da tableta a paisaxe e escritorio
  @media ( ancho mínimo : 768 píxeles ) e ( ancho máximo : 940 píxeles ) { ... }        
 
  // Escritorio grande
  @media ( ancho mínimo : 1200 px ) { .. }