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)