Bootstrap explicación del sistema Grid

Extracto

Bootstrap se construye sobre una estructura de 12 columnas virtuales. Estas columnas son adaptables. Además existe la posibilidad de trabajar con anchos fijos y fluidos basados en este sistema. Igualmente existen opciones para convertir nuestro HTML para distintos soportes.

Abreviaturas usadas

• Bootstrap (BS)
• Píxel (px)

Sistema Grid

BS proporciona un sistema de 12 columnas con un ancho total de 940px de ancho. Nosotros podemos repartir estas columnas a nuestra conveniencia, por ejemplo:

• 12 columnas de 1.
• 4 columnas de 3.
• 3 columnas de 4.
• 2 columnas de 6.
• 1 columna de 12.
• 1 columna de ocho y otra columna de 4.
• etcétera...

Como comprobarás siempre suman doce, vamos a crear un grid con dos columnas 1 de cuatro y otra de ocho.

Columnas de compensación

Siempre con la mente en 12 columnas, podemos "compensar" columnas, es decir, dejar espacios en blanco entre las columnas a nuestra voluntad y dependiendo de las necesidades de nuestro diseño. Vamos a crear cuatro columnas, cuatro vacías y otras cuatro columnas.

Columnas Fluídas

Basado en porcentajes, no en píxeles, el funcionamiento y concepto es similar, si bien el class del div es "row-fluid". Esto permite asegurar las proporciones adecuadas cuando cambiamos de dispositivo. Me refiero a que nuestra página sea consultada por smartphones, tablets, ordenadores... etc.

Anidamiento de columnas

Esto nos permite dividir una columna (del ancho que tú elijas) en varias columnas a tu criterio. Una curiosidad: el número de columnas anidadas no es necesario que coincida con el nivel superior, en su lugar tus columnas hijas se reajustarán al 100% de su columna contenedora o columna padre. No obstante eso lo desaconsejo porque dificulta la comprensión del grid. Veamos un ejemplo:

Personalización del grid

Existe un archivo llamado variables.less donde las siguientes variables afectan a tus diseños.

1. @gridColumns, número de columnas, valor por defecto 12.
2. @gridColumWidth, ancho de cada columna, valor por defecto 60px.
3. @gridGutterWidth, espacio vacío entre columnas, valor por defecto 20px.
4. @SiteWidth, cuenta el número de columnas y espacios para poner en ancho correcto, valor por defecto, la suma de todas las columnas y espacios entre éstas.

Plantillas

Plantilla fija

El ancho predeterminado es 940px para cualquier página web proporcionada

Plantilla Fluída

Permite una estructura de página flexible, con anchos mínimos y máximos y una barra a la izquierda. Ideal para aplicaciones documentales.