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.

 

</div>

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.

 

</div>

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.

 

</div>

 

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:
Level 1 of column

Level 2

 

Level 2

</div> </div> </div>

 

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

</body>

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.

 

</div> </div>

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: