01 de Julio del 2016
¿Qué es Bootstrap?
Bootstrap es un framework o conjunto de herramientas para diseño de sitios y aplicaciones web. Contiene plantillas de diseño con tipografía, formularios, botones, cuadros, menús de navegación y otros elementos de diseño basado en HTML y CSS, así como, extensiones de JavaScript opcionales adicionales.
¿Qué es la grilla Bootstrap?
La grilla de Bootstrap es un modelo de 12 columnas idénticas (invisibles para el usuario) que facilita el diseño y desarrollo de aplicaciones y sitios web. Las 12 columnas son un punto de partida, que permiten al diseñador diagramar la página con el uso de módulos (div/contenedores) que pueden ocupar desde 1, hasta 12 columnas de ancho.
El diseñador puede combinar libremente módulos de distinto ancho en cada fila, siempre y cuando el total no supere las 12 columnas permitidas por la grilla. Cada fila (row) nueva, permite una nueva configuración de módulos.
Ejemplo:
El diseñador puede presentar un diseño de 2 módulos de 6 columnas en la primer fila para lograr un balance simétrico, y debajo en la segunda fila, cambiar a 3 módulos siendo el primero de 2 columnas, y los dos restantes de 5 columnas cada uno. Lo importante es que en cada fila (row) la suma total del ancho de los módulos no supere las 12 columnas. Nota: No es obligatorio que la suma total del ancho de los módulos en cada fila sea de 12. Una fila, puede tener un conjunto de módulos cuya suma sea menor a 12 columnas, porque el diseñador quiere generar un descanso visual.
Responsive
A su vez, este sistema es responsivo. Bootstrap trae de forma predefinida reglas de css que permiten al desarrollador indicar cuánto espacio (o columnas) debe ocupar cada módulo, en los distintos dispositivos. De esta manera, el diseñador puede definir que por ejemplo, un bloque de texto ocupe todo el ancho disponible para resoluciones altas (monitores) y que ocupe la mitad, o un tercio del ancho disponible, para resoluciones intermedias, o menores (tablets).
El sistema responsivo de la grilla se ajusta de forma automática para las siguientes resoluciones:
| Celulares (<768px) | Tablets standard (≥768px) | Tablets Alta Gama(≥992px) | Laptop standard (≥1200px) | |
|---|---|---|---|---|
| Ancho del contenedor |
|
|
|
|
| Ancho del medianil |
|
|
|
|
| Ancho de la columna |
|
|
|
|
Ejemplo:
En un monitor de 1366px de ancho, El ancho del contenedor de la grilla, será de 1170px. Las 12 columnas se ajustarán dentro de ese contenedor, ocupando cada una de ellas un ancho ~97px. Si el usuario ajusta el navegador, y lo lleva a un ancho de 1000px, entrará en acción una regla responsiva de Bootstrap, que cambiará el ancho del contenedor de la grilla a 970px, ocupando cada una de las columnas un ancho ~81px.
Para entenderlo, es mejor verlo.
A continuación, presentamos un ejemplo práctico del uso de la grilla de Bootstrap. Los elementos que constituyen la grilla (contenedor, filas/rows, columnas, medianiles/gutter y módulos) están coloreados a propósito, con el fin de visualizar el espacio que cada uno ocupa. Por defecto, estos elementos no tienen ningún color, es decir, son transparentes.
