Andamio

Bootstrap se basa en una cuadrícula receptiva de 12 columnas. También hemos incluido diseños de ancho fijo y fluido basados en ese sistema.

Cuadrícula predeterminada de 940 px

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.

Columnas de compensación

4 compensación 4

3 compensación 3

8 compensación 4

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

Columnas de anidamiento

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

Nivel 1 de columna

Nivel 2

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

personalización de cuadrícula

Variable	Valor por defecto	Descripción
`@gridColumns`	12	Número de columnas
`@gridColumnWidth`	60 píxeles	Ancho de cada columna
`@gridGutterWidth`	20px	Espacio negativo entre columnas
`@siteWidth`	Suma calculada de todas las columnas y canaletas	Cuenta el número de columnas y canales para establecer el ancho de la `.container-fixed()`mezcla

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 para ayudar a que sus proyectos sean más apropiados en diferentes dispositivos y resoluciones de pantalla. Esto es lo que está incluido:

Etiqueta	Ancho de diseño	Ancho de columna	Ancho del canalón
teléfonos inteligentes	480px y menos	Columnas fluidas, sin anchos fijos
Tabletas de retrato	480px a 768px	Columnas fluidas, sin anchos fijos
Tabletas de paisaje	768px a 940px	44px	20px
Defecto	940px y más	60 píxeles	20px
Pantalla grande	1210px y más	70px	30px

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

Usando las consultas de medios

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:

Use la versión receptiva compilada, bootstrap-responsive.css
Agregue @import "responsive.less" y vuelva a compilar Bootstrap
Modifique y vuelva a compilar responsive.less por 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 : 940 px ) { ... }        
 
  // escritorio grande
  @media ( ancho mínimo : 1200px ) { .. } _