La rejilla (grid) Bootstrap

Bootstrap incluye un potente sistema de rejilla (grid) para la construcción de diseños de todas las formas y tamaños. Se basa en un diseño de 12 columnas y tiene varios niveles.

El sistema de cuadrícula de Bootstrap utiliza una serie de contenedores, filas y columnas para diseñar y alinear el contenido.

En este artículo queremos demostrar algún ejemplo e informar de las principales funciones o ventajas de usar esta rejilla.

Principales funciones:

  • Los contenedores proporcionan un medio para centrar el contenido de de una página Web. Se puede usar la clase CSS .container para establecer un ancho fijo o .container-fluid para establecer un ancho completo, es decir, ocupando toda la pantalla.
  • Las filas son grupos horizontales de columnas donde se aseguran que sus columnas estén alineadas correctamente. Utiliza el método de margen negativo en .row para asegurar que todo el contenido esté alineado correctamente por el lado izquierdo.
  • El contenido debe colocarse dentro de las columnas, y sólo las columnas pueden ser hijos inmediatos de las filas.
  • Las columnas de la cuadrícula sin un ancho establecido, automáticamente se muestran con anchos iguales. Por ejemplo, cuatro instancias de .col-sm serán automáticamente un 25% de ancho.
  • Las clases de columna indican el número de columnas que se desea utilizar de las 12 posibles por fila. Por tanto, si deseas tres columnas de igual ancho, puede utilizar .col-sm-4.
  • Los anchos de columna se establecen en porcentajes, esto significa que siempre son fluidos y dimensionados en relación con su elemento principal.
  • Hay cinco niveles de rejilla, uno para cada punto de interrupción sensible: todos los puntos de interrupción (extra pequeño), pequeño, medio, grande y extra grande.
  • Los niveles de la grilla se basan en anchos mínimos, lo que significa que se aplican a ese nivel y todos los que están por encima (por ejemplo, .col-sm-4 se aplican a dispositivos pequeños, medianos, grandes y extra grandes).
  • Puedes utilizar clases de cuadrícula predefinidas o mezclas Sass para obtener más marcado semántico.

Opciones de la rejilla

Quizás te pueda resultar más interesante conocer todo esto con ejemplos o de forma visual. Fíjate bien en la siguiente foto:

Ver ejemplo en linea

Dispones de otras opciones para manipular los contenedores:

Push and pull

Esta opción permite cambiar fácilmente el orden de las columnas de la cuadrícula incorporando las clases de modificación .push-md- * y .pull-md- *.

Anidamiento

Para anidar el contenido con la cuadrícula predeterminada, puedes agregar un nuevo contenedor con .row y un conjunto de columnas .col-sm- * dentro de una columna .col-sm- * existente. Las filas anidadas deben incluir un conjunto de columnas que suman 12 o menos (no es necesario que utilice las 12 columnas disponibles).

Ver más documentación

Quizá te pueda resultar un sistema un poco limitado pero con esta rejilla de Bootstrap se pueden hacer muchos diseños de forma fácil y adaptables a todos los dispositivos. De hecho, esta es una de las claves de su éxito para continuar siendo una de las tecnologías más utilizadas.

Anímate y envíanos un comentario respondiendo a nuestra pregunta. ¿Te parece Bootstrap una herramienta que tiene futuro? ¿O conoces alguna que la suplantará?

Autor
Escrito por Jose Aguilar - Director ejecutivo y tecnológico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.
Te ha servido? Valora esta entrada!
1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (3 votos, promedio: 5,00 de 5)
Cargando…
Comparte en las redes sociales

2 respuestas a “La rejilla (grid) Bootstrap”

  1. caliche dice:

    un comentario

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ver más sobre