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 de 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

As filas anidadas deben incluír un conxunto de columnas que se suman ao número de columnas do seu pai. Por exemplo, dúas .span3columnas aniñadas deben colocarse dentro dun .span6.

<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>

Porcentaxes, non píxeles

O sistema de reixa fluída usa porcentaxes para anchos de columna en lugar de píxeles fixos. Tamén ten as mesmas variacións de resposta que o noso sistema de reixa fixa, o que garante as proporcións adecuadas para as resolucións de pantalla e os dispositivos clave.

Filas fluídas

Fai fluído calquera fila simplemente cambiando .rowa .row-fluid. As columnas seguen sendo exactamente as mesmas, polo que é moi sinxelo cambiar entre deseños fixos e fluídos.

Marcado

<div class = "fluído de fila" > 
  <div class = "span4" > ... </div> 
  <div class = "span8" > ... </div> 
</div>

Aniñar con cuadrículas fluídas é un pouco diferente: o número de columnas aniñadas non precisa coincidir co pai. Pola contra, as túas columnas restablecen en cada nivel porque cada fila ocupa o 100 % da columna principal.

<div class = "fluído de fila" > 
  <div class = "span12" > 
    Nivel 1 da columna
    <div class = "fluído de 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 = "fluído de fila" > 
    <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 nun único ficheiro 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:

Require metaetiqueta

Para garantir que os dispositivos mostren correctamente as páxinas que responden, inclúe a metaetiqueta da vista.

<meta name = "viewport" content = "width=device-width, initial-scale=1.0" >  

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. Modifica e recompila responsive.less como un ficheiro 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 : 980 píxeles ) { ... }        
 
  // Escritorio grande
  @media ( ancho mínimo : 1200 px ) { .. }