Implantación de Bootstrap (I) y diseño adaptativo

En este artículo (y el próximo) vamos a incluir el framework Bootstrap 3 en nuestro tema. ¿Para qué? Para aprovechar toda la potencia CSS3, HTML5 y JavaScript que Bootstrap nos proporciona, y conseguir un sitio web de calidad con la última tecnología que existe.

Este no será un artículo fácil ni corto. Por eso, vamos allá.

 

¿Por qué utilizar Bootstrap?

Para contestar a esta pregunta, aconsejo leer el siguiente artículo de Sandra Sanmartí, Bootstrap 3: ¿Vale la pena usar un framework?. En mi caso he considerado que sí vale la pena.

 

¿Cómo instalar Bootstrap?

Para ello, debemos ir a la página oficial de Bootstrap, getbootstrap.com, y descargarlo donde indica ‘Download Bootstrap’. Ello nos llevará a otro sitio donde dispondremos de tres opciones: ‘Download Bootstrap’, ‘Download source’ y ‘Download Sass’. Escogemos la primera y se nos descargará un archivo ‘bootstrap-3.3.6-dist.zip’, que descomprimiremos en el directorio de nuestro tema WordPress.

 

Conectar los elementos Bootstrap a nuestro tema

Para conectar los elementos de Bootstrap a nuestro tema, en el archivo de plantilla functions.php incluiremos el siguiente código al final:

Es importante tener en cuenta el orden de las referencias. En cuanto a estilos, primero cargamos Bootstrap, que será el base, y luego nuestro style.css en el que personalizamos nuestro tema. Sobre los scripts, recordemos que primero se tenía que llamar a jQuery y luego a las funciones de Bootstrap.

NOTA IMPORTANTE: Como en paralelo estoy desarrollando esta serie de artículos y estoy estudiando cómo hacerlo, debemos eliminar tres líneas del archivo de plantilla header.php que habíamos incluido en el artículo sobre la Crear un shortcode, e incluir JavaScript y Bootstrap, y que no estaba bien:

También eliminamos la referencia al archivo style.css (primera línea), ya que las 4 referencias están ahora en el archivo functions.php.

Ahora, debemos modificar el script que había incluido al final del shortcode del artículo arriba referenciado, en el archivo partes/shortcodes.php, que ahora queda así:

Explicación: hemos eliminado las líneas que acababan por display = “block” y display=”none”. Estas líneas eran un apaño, pues no se me ocultaba la capa #contenido con la función collapse, ya que la implementación de jQuery y las funciones de Bootstrap en el header no era la correcta. Ahora podréis comprobar que funciona perfectamente, incluso la transición. Otra cosa que se ha modificado es poner jQuery(“#contenido”) en lugar de $(“#contenido”). Esto es porque así se llama a jQuery y no se producen conflictos.

 

DISEÑO ADAPTATIVO CON BOOTSTRAP

Bootstrap nos ofrece diferentes elementos para alcanzar un diseño adaptativo para nuestro sitio web. Adaptativo significa que nuestro sitio se verá diferente si lo estás visualizando en un ordenador con pantalla grande, con pantalla pequeña, o bien si lo visualizas en una tablet o en un smartphone. El diseño, en cada caso, se ‘adapta’ para mejorar la experiencia del usuario, sin perder el contenido de nuestra web.

Para ello, nos proporciona diversas herramientas, como son las rejillas, las utilidades responsive (para visualización o no de algunos elementos) y los menús horizontales adaptativos.

La rejilla

Preparar la página

Primero, debemos asegurarnos el uso del doctype de HTML5. Para ello, el primer código en todas nuestras páginas será:

Para que las páginas se muestren correctamente en los dispositivos móviles, dentro de la cabecera <head> se debe añadir la siguiente etiqueta:

A partir de aquí, debemos integrar todos los elementos de la página dentro de un elemento, y aplicarle la clase “.container” para una anchura fija, o “container-fluid” para una anchura variable.

Una vez dentro del contenedor (“container”), definiremos las filas (“row”). Las filas se alinean bien y muestran el padding correcto. Las filas se utilizan para agrupar horizontalmente a varias columnas (“col”).

El contenido siempre se coloca dentro de las columnas, pues las filas sólo contienen como hijos elementos de tipo columna. La separación entre columnas se hace con padding.

Dispositivos muy pequeños Teléfonos (<768px) Dispositivos pequeños Tablets (>=768px) Dispositivos medianos Ordenadores (>=992px) Dispositivos grandes Ordenadores (>1200px)
Comportamiento Las columnas se muestran siempre horizontalmente. Si se estrecha el navegador, las columnas se muestran verticalmente. A medida que aumenta su anchura, la rejilla muestra su aspecto horizontal normal.
Anchura máxima del contenedor Ninguna (auto) 728 px 940 px 1170 px
Prefijo clases CSS .col-xs- .col-sm- .col-md- .col-lg-
Número de columnas 12 siempre
Anchura máx. de columna auto 60px 78px 95px
Separación entre columnas 30 px (15 px a cada lado de la columna)
¿Permite anidación? Sí, siempre
¿Permite desplazar columnas? no
¿Permite reordenar columnas? no

También se pueden anidar columnas dentro de otras columnas. Para ello, dentro de una columna con la clase col-md-* crea un nuevo elemento con la clase .row y añade una o más columnas con la clase .col-md-*. Las columnas anidadas tienen que sumar 12 columnas de anchura, tal y como se muestra en el siguiente ejemplo:

Llevarlo a la práctica

Veamos un esquema de cómo es nuestra página web:

esquema

Para definir esta estructura por el sistema de rejilla de Bootstrap, debemos hacerlo de la siguiente manera:

Dos detalles:

  • En el cuerpo central, en formatos lg y md la sección artículos mide 9 columnas y la barra lateral 3. Sin embargo, en formatos pequeños, sm y xs, ambas pasan a medir 12. ¿Porqué? Porque así, cuando se estrecha la pantalla, ambas pasan a ocupar todo el ancho y la barra lateral se pasa debajo del contenido.
  • Si queremos modular un área, p.ej. el pie de página, dentro deberemos establecer una fila (row) con las columnas que necesitemos. En nuestro caso serían el texto, el menú y el área de widget. Con los tres deberíamos hacer la misma definición de columnas.

En el caso de este tema, he querido emular la disposición que hace Joomla! con los posts. Primero permite mostrar una cierta cantidad de artículos a ancho completo, para después visualizar el resto más pequeños en columnas. Esto ha requerido un pequeño estudio previo que podéis ver aquí:

adaptativo1adaptativo2

Con no poco trabajo y sí bastante código, el resultado no ha quedado nada mal, ¿no os parece?

ancha

Si ahora estrechamos la ventana del navegador, el resultado es el siguiente:

estrecha

Por cierto, disculpad por las fotos, jeje.

 

Las utilidades responsive

En este caso no he empleado las utilidades responsive que ofrece Bootstrap para mostrar u ocultar elementos en nuestro sitio web, en función del dispositivo en que lo estemos visualizando. Basicamente, debemos añadir las clases de la siguiente tabla:

Clase Teléfonos Tablets Ordenador Ordenador grande
.visible-xs Visible Oculto Oculto Oculto
.visible-sm Oculto Visible Oculto Oculto
.visible-md Oculto Oculto Visible Oculto
.visible-lg Oculto Oculto Oculto Visible
.hidden-xs Oculto Visible Visible Visible
.hidden-sm Visible Oculto Visible Visible
.hidden-md Visible Visible Oculto Visible
.hidden-lg Visible Visible Visible Oculto

También disponemos de una tabla para impresiones:

Clase Navegador Impresora
.visible-print Oculto Visible
.hidden-print Visible Oculto

 

Menú horizontal adaptativo

Hacer nuestro menú horizontal, adaptativo, me ha costado bastante, lo reconozco, aunque al final lo he resuelto. Al final, queda como sigue:

Para que termine de quedar a nuestro gusto, un pequeño ajuste en style.css:

Otra modificación que debemos hacer es eliminar el posicionamiento de los elementos que hicimos al principio:

 

En fin, con estos tres elementos, conseguimos que nuestro sitio web adquiera un aspecto elegante en cualquier dispositivo en el que se visione. Se puede mejorar, sin duda, pero creo que eso ya queda al albedrío de cada uno, que estudie la forma de hacerlo mediante las herramientas que nos ofrece Bootstrap.

 

Aún así, en nuestro próximo artículo veremos más elementos de Bootstrap con los que mejorar aún más nuestro sitio web, y la forma de hacerlo.

Deja un comentario

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