May 222014
 
Artículo WordPress

Añadir estilo con Bootstrap 3

Una vez que tenemos todos los elementos básicos incorporados en nuestro tema, ha llegado el momento de diseñar su presentación. Para ello, vamos a utilizar la librería Bootstrap de twitter. Bootstrap nos ofrece una solución «adaptativa» (en ingles: responsive) para la presentación del sitio en plataformas múltiples, tanto ordenadores de sobremesa como portátiles, tablets y teléfonos inteligentes.

  • Descargar Bootstrap 3 y extraer el contenido del fichero comprimido en el directorio del tema (en nuestro caso, el fichero descargado es bootstrap-3.1.1-dist.zip).
  • Importar bootstrap en style.css:

  • Añadir el tag «viewport» dentro de la sección <head>, en header.php:

Con esto, podemos volver a visitar el sitio desde el navegador y comprobar el resultado:

Como podemos ver, el aspecto del sitio ha cambiado drásticamente. Pero el menú todavía aparece como una lista de elementos.

A continuación, vamos colocar la barra lateral a la derecha del contenido principal, para lo cual vamos a incluir toda la página dentro de un div «container», en el cual se encuentran:

  • el contenido principal, dentro de un div «col-md-8»
  • la barra lateral, dentro de un div «col-md-4»

1. En header.php, sustituimos todo lo que hay debajo del tag <body> por:

2. Al comienzo de footer.php, cerramos el div «col-md-8», e introducimos la barra lateral dentro de un div «col-md-4»:

3. Tambien en footer.php, cerramos el div «container» inmediatamente antes del tag «</body>»:

Y, volviendo a acceder al la página del blog, podemos comprobar cómo la barra lateral se ha colocado a la derecha del contenido principal:

blog-con-sidebar

 

En el próximo artículo explicaremos las modificaciones que hay que realizar en el tema para que nuestro menú utilice el estilo de menú de bootstrap.

Referencias

 Publicado por en 4:29 pm

 Deja un comentario

(requerido)

(requerido)