El sistema de cuadrícula predeterminado proporcionado como parte de Bootstrap es una cuadrícula de 12 columnas de 940 px de ancho .

También tiene cuatro variaciones receptivas para varios dispositivos y resoluciones: teléfono, tableta vertical, mesa horizontal y escritorios pequeños y escritorios de pantalla ancha grande.

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

Como se muestra aquí, se puede crear un diseño básico con dos "columnas", cada una de las cuales abarca un número de las 12 columnas fundamentales que definimos como parte de nuestro sistema de cuadrícula.

Con el sistema de cuadrícula estática (no fluida) en Bootstrap, el anidamiento es fácil. Para anidar su contenido, simplemente agregue un nuevo .rowconjunto de .span*columnas dentro de una .span*columna existente.

Ejemplo

Las filas anidadas deben incluir un conjunto de columnas que se suman al número de columnas de su padre. .span3Por ejemplo, se deben colocar dos columnas anidadas dentro de un archivo .span6.

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

Porcentajes, no píxeles

El sistema de cuadrícula fluida usa porcentajes para anchos de columna en lugar de píxeles fijos. También tiene las mismas variaciones de respuesta que nuestro sistema de cuadrícula fija, lo que garantiza las proporciones adecuadas para las resoluciones de pantalla y los dispositivos clave.

Filas fluidas

Haga que cualquier fila sea fluida simplemente cambiando .rowa .row-fluid. Las columnas permanecen exactamente iguales, lo que hace que sea muy sencillo alternar entre diseños fijos y fluidos.

Margen

<div clase = "fila-fluido" > 
  <div clase = "span4" > ... </div> 
  <div clase = "span8" > ... </div> 
</div>

Anidar con cuadrículas fluidas es un poco diferente: el número de columnas anidadas no necesita coincidir con el principal. En cambio, sus columnas se restablecen en cada nivel porque cada fila ocupa el 100 % de la columna principal.

<div clase = "fila-fluido" > 
  < clase div = "span12" > 
    Nivel 1 de columna
    <div clase = "fila-fluido" > 
      <div class = "span6" > Nivel 2 </div> 
      <div class = "span6" > Nivel 2 </div> 
    </div>
  </div>
</div>

Variables en MENOS

En Bootstrap hay un puñado de variables para personalizar el sistema de cuadrícula predeterminado de 940 px, documentado anteriormente. Todas las variables de la cuadrícula se almacenan en variables.less.

como personalizar

Modificar la cuadrícula significa cambiar las tres @grid*variables y volver a compilar Bootstrap. Cambie las variables de cuadrícula en variables.less y use una de las cuatro formas documentadas para recompilar . Si está agregando más columnas, asegúrese de agregar el CSS para aquellas en grid.less.

Mantenerse receptivo

La personalización de la cuadrícula solo funciona en el nivel predeterminado, la cuadrícula de 940 px. Para mantener los aspectos receptivos de Bootstrap, también deberá personalizar las cuadrículas en responsive.less.

Diseño fijo

El diseño centrado predeterminado y simple de 940 px de ancho para casi cualquier sitio web o página proporcionado por un solo archivo <div class="container">.

<cuerpo>
  < clase div = "contenedor" > 
    ...
  </div>
</cuerpo>

Diseño fluido

<div class="container-fluid">proporciona una estructura de página flexible, anchos mínimos y máximos y una barra lateral izquierda. Es genial para aplicaciones y documentos.

<div clase = "líquido-contenedor" > 
  <div clase = "fila-fluido" > 
    < clase div = "span2" > 
      <!--Contenido de la barra lateral-->
    </div>
    < clase div = "span10" > 
      <!--Contenido del cuerpo-->
    </div>
  </div>
</div>

Dispositivos soportados

Bootstrap admite un puñado de consultas de medios en un solo archivo para ayudar a que sus proyectos sean más apropiados en diferentes dispositivos y resoluciones de pantalla. Esto es lo que está incluido:

Requiere metaetiqueta

Para asegurarse de que los dispositivos muestren las páginas receptivas correctamente, incluya la metaetiqueta de la ventana gráfica.

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

Lo que hacen

Las consultas de medios permiten CSS personalizado en función de una serie de condiciones (proporciones, anchos, tipo de visualización, etc.), pero generalmente se enfoca en min-widthy max-width.

• Modificar el ancho de la columna en nuestra grilla
• Apilar elementos en lugar de flotar donde sea necesario
• Cambiar el tamaño de los encabezados y el texto para que sean más apropiados para los dispositivos

Bootstrap no incluye automáticamente estas consultas de medios, pero comprenderlas y agregarlas es muy fácil y requiere una configuración mínima. Tiene algunas opciones para incluir las funciones receptivas de Bootstrap:

1. Use la versión receptiva compilada, bootstrap-responsive.css
2. Agregue @import "responsive.less" y vuelva a compilar Bootstrap
3. Modifique y vuelva a compilar responsive.less como un archivo separado

¿Por qué no simplemente incluirlo? A decir verdad, no todo tiene que ser receptivo. En lugar de alentar a los desarrolladores a eliminar esta función, consideramos que es mejor habilitarla.

  // Teléfonos horizontales y hacia abajo
  @media ( ancho máximo : 480px ) { ... } _     
 
  // Teléfono horizontal a tableta vertical
  @media ( ancho máximo : 768px ) { ... } _     
 
  // Tableta vertical a horizontal y de escritorio
  @media ( ancho mínimo : 768 px ) y ( ancho máximo : 980 px ) { ... }        
 
  // escritorio grande
  @media ( ancho mínimo : 1200px ) { .. } _