Uno de los temas más complicados, pero a su vez más útiles, de usar Bootstrap es su sistema de grids, esto es, cómo redistribuir los espacios dentro de una web o webapp. El sistema está basado en contenedores, que asu vez pueden contener más contenedores, y así sucesivamente. El reto es evitar las tablas, una técnica obsoleta en el diseño web (a veces no hay más remedio que usar las tablas, je je, … pero para presentar información tabulada, no para un diseño web).
Contenedores
Existen 3 clases fundamentales: container, container-fluid y jumbotron.
El último, jumbotron, es una clase que se utiliza principalmente para los títulos, de hecho, así lo puedes ver en los códigos de ejemplo. Container-fluid es una clase para adaptar el contenedor al máximo ancho disponible, mientras que container está limitado y además centrado.
La malla o grid
La principal virtud de Bootstrap es la malla, el sistema que permite adaptar el contenido a cualquier tamaño, y que es quizás, de las partes más complicadas de este framework, y cuyas características son:
- Es una malla
- Trabaja siempre como 12 columnas
- Hay cuatro tipos de mallas, dependiendo de la resolución del dispositivo.
En la siguiente tabla se muestran los valores, dependiente del tamaño del dispositivo, para que te hagas una idea de los tamaños mínimos, anchos, …. y las clases que debes usar:
|
Extra small devices
e.g. phones
(< 768 px)
|
Small devices
e.g. tablets
(≥ 768 px)
|
Medium devices
e.g. laptops
(≥ 992 px)
|
Large devices
e.g. desktops
(≥ 1200 px)
|
|
|---|---|---|---|---|
| Container width | None (auto) | 750px | 970px | 1170px |
| Column class prefix | col-xs- | col-sm- | col-md- | col-lg- |
| Column width | Auto | 60px | 75px | 95px |
El hecho de que la malla sea de 12 columnas no es casualidad, ya que siempre puedes usar 6 y 6 si quieres partir en 2 la pantalla, o 4-4-4 si quieres 3 columnas, o 3-3-3-3 si quieres cuatro columnas. Por supuesto, puedes usar la composición que quieras, como 6-4-2, o 6-3-3, …. Lo mejor de todo es que la adaptación a cualquier resolución forma parte del trabajo a realizar por Bootstrap, y tú no te tienes que preocupar por ello! Sólo tienes que seleccionar la clase correcta, que se basa en:
- col, que indica que es una columna
- Tamaño del grid, si es xs, sm, md o lg
- Número de columnas, de 1 a 12
Así, si queremos una distribución 6-3-2-1, necesitaremos las clases col-md-6, col-md-3, col-md-2 y col-md-1.
Por defecto, siempre usa las 12 columnas, es decir, el ancho completo disponible.
Pero ¿Y qué pasa cuando tengo más de 12 columnas? La respuesta es sencilla: pasa a la siguiente fila (row).
Sin duda, este comportamiento es toda una ventaja para el diseño del front-end de una web o app, con buen diseño independiente del dispositivo. Puedes aprender más sobre grids, en este fantástico artículo.
Temas para Bootstrap
A pesar de que los colores originales de Bootstrap están muy relacionados con sus creadores, Twitter, seguramente querrás darle un toque diferente. Para ello, nada mejor que usar temas, y la mejor alternativa que conozco es http://bootswatch.com/. Simplemente te descargas los archivos Bootstrap.css o Bootstrap.min.css y reemplazas, y listo! Tu web con un estilo diferente
Y esto es todo …. por ahora!