Cómo usar Bootstrap en una aplicación web

Bootstrap es un framework para CSS y JavaScript, creado con el objetivo de facilitar la organización de contenido, la aplicación de estilos y el desarrollo de páginas web adaptables a dispositivos móviles. En este artículo se demostrará como usar Bootstrap en una aplicación web.

Hemos preparado un sitio web estático cargado con información básica sobre todas las películas de la saga Star Wars, para que el lector pueda usarlo durante el desarrollo del artículo. Este sitio web es bastante simple y solo contiene código HTML sin estilos CSS ni código JavaScript:

El sitio web puede ser descargado como un archivo ZIP desde Github o Bitbucket, o puede ser clonado desde una terminal:

$ git clone https://github.com/rukbotto/simple-starwars-site.git

Esto creará un directorio simple-starwars-site/ con todas las páginas e imágenes del sitio web:

simple-starwars-site/
  add-movie/
  episode-i/
  episode-ii/
  episode-iii/
  episode-iv/
  episode-v/
  episode-vi/
  episode-vii/
  media/
  index.html

El objetivo es utilizar Bootstrap para organizar el contenido, mejorar la tipografía y las imágenes y aplicar estilos a todas las páginas del sitio.

A pesar que las páginas del sitio web se pueden abrir directamente, se recomienda usar un servidor web ligero (como SimpleHTTPServer en Python 2.7 o http.server en Python 3) para servirlas localmente. De esta forma, las imágenes y estilos pueden ser mostrados apropiadamente.

Descargando e instalando Bootstrap

Las instrucciones que aparecen en este artículo aplican para la versión 3.3.6 de Bootstrap.

A continuación, es necesario descargar e instalar Bootstrap. Para esto, nos dirigimos a la página de descargas y hacemos clic en el botón Download Bootstrap:

Al finalizar la descarga, obtendremos el archivo bootstrap-3.3.6-dist.zip el cual vamos a descomprimir. El directorio resultante tiene la siguiente estructura:

bootstrap-3.3.6-dist/
  css/
  fonts/
  js/

Copiamos los directorios css/, fonts/ y js/ al directorio donde se encuentra el sitio web estático, de la siguiente manera:

simple-starwars-site/
  ...
  static/
    css/
    fonts/
    js/
  ...

Para finalizar la instalación, es necesario incluir los archivos CSS de Bootstrap en la cabecera de todos los archivos HTML que se encuentran en el directorio del sitio estático:

<!DOCTYPE html>
<html>
  <head>
    ...
    <link rel="stylesheet" href="/static/css/bootstrap.css">
    <link rel="stylesheet" href="/static/css/bootstrap-theme.css">
  </head>
 ...

También debemos incluir el archivo JavaScript de Bootstrap al final de cada archivo HTML, antes del cierre de la etiqueta <body>:

    ...
    <script src="/static/js/bootstrap.js"></script>
  </body>
</html>

Descargando e instalando jQuery

Algunos componentes de Bootstrap utilizan código JavaScript y la librería jQuery para funcionar correctamente. A continuación descargaremos e instalaremos jQuery. Podemos obtener la última versión en la página de descargas:

Descargamos la última versión de desarrollo, que al momento de escribir este artículo es la versión 1.12.1, y copiamos el archivo al directorio del sitio web estático:

simple-starwars-site/
  ...
  static/
    js/
      ...
      jquery-1.12.1.js

Incluimos la librería jQuery al final de cada uno de archivos HTML, antes del cierre de la etiqueta <body>. La inclusión de jQuery debe hacerse justo antes de la inclusión de Bootstrap:

    ...
    <script src="/static/js/jquery-1.12.1.js"></script>
    <script src="/static/js/bootstrap.js"></script>
  </body>
</html>

Probando la instalación de Bootstrap y jQuery

Para probar si hemos instalado correctamente Bootstrap y jQuery, abrimos en el navegador de preferencia, cualquiera de las páginas modificadas y veremos que el estilo de la tipografía ha cambiado:

Organizando la página de inicio

En la página de inicio (simple-starwars-site/index.html), tenemos un listado con las siete películas de Star Wars que hasta el momento se han producido y presentado. Para cada película en el listado, se muestra el titulo, la imagen del póster oficial y el texto que aparece al iniciar cada película, llamado Opening Crawl.

Lo que queremos es organizar la información de tal manera que podamos ver la imagen del póster y al mismo tiempo ver el Opening Crawl sin tener que desplazarnos demasiado por toda la página.

Para organizar el contenido usaremos un componente de Bootstrap llamado Grid o Grilla que nos permite dividir el ancho de la página en doce columnas. Esta grilla es completamente adaptable, lo que significa que el sitio web se adaptará automáticamente a la pantalla de cualquier dispositivo.

Para comenzar, vamos a crear un contenedor <div class="container">, el cual va a servir para alojar el listado de las películas:

<body>
  <div class="container">
    <section>
      <h1>Star Wars Movies</h1>
      <p>Explore all official Star Wars movies.</p>
      ...
    </section>
  </div>
  ...
</body>

En seguida vamos a crear un contenedor <div class="row"> por cada película en el listado:

<div class="row">
  <article>
    <h2><a href="/episode-i/">Episode I: The Phantom Menace</a></h2>
    <img src="/media/images/starwars_episode_i.png" alt="Episode I: The Phantom Menace">
    ...
  </article>
</div>

Ahora vamos a organizar el contenido de cada película en dos secciones. En la sección de la izquierda vamos a colocar la imagen del póster y en la sección de la derecha vamos a colocar el titulo y el texto del Opening Crawl:

<div class="row">
  <article>
    <div class="col-md-3">
      <img src="/media/images/starwars_episode_i.png" alt="Episode I: The Phantom Menace">
    </div>
    <div class="col-md-9">
      <h2><a href="/episode-i/">Episode I: The Phantom Menace</a></h2>
      ...
    </div>
  </article>
</div>

Finalmente, agregamos la clase .img-responsive a la imagen, para que esta se adapte de forma automática al contenedor en el que se encuentra:

<img class="img-responsive" src="/media/images/starwars_episode_i.png" alt="Episode I: The Phantom Menace">

La razón por la que usamos <div class="container"> es porque no se puede construir la grilla afuera de este contenedor. Es decir que <div class="row"> y <div class="col-md-X"> no funcionarán correctamente si no están dentro del contenedor .container.

El contenedor <div class="row"> sirve para definir las filas de la grilla y dentro de él se colocan los contenedores <div class="col-md-X">, que se usan para definir las columnas de la grilla. En conclusión, la forma correcta de definir una grilla es:

<div class="container">
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
    </div>
  </div>
</div>

En este caso tenemos una grilla compuesta por dos filas, cada una de ellas con una columna que ocupa todo el ancho de la página.

Ahora bien, en el ejemplo que estamos explicando, hemos usado <div class="col-md-3"> para definir la sección de la imagen y <div class="col-md-9"> para definir la sección con el titulo y el texto. Esto significa que la sección de la imagen va a ocupar las primeras tres columnas, de izquierda a derecha, de las doce en las que se ha dividido la página y la sección con el texto va a ocupar las restantes nueve columnas.

Al implementar los cambios, la página de inicio debe verse de la siguiente manera:

Organizando la página de cada película

Para demostrar cómo organizar la información presente en la página de cada película, solo vamos a modificar la página del Episodio I (simple-starwars-site/episode-i/index.html). Dejamos como ejercicio para el lector la modificación de las demás páginas. Las instrucciones para esta página se pueden aplicar a las demás.

En este punto, la página del Episodio I se ve así:

Vamos a organizar la información de una manera similar que en la página de inicio. Vamos a crear una sección a la izquierda para colocar la imagen del póster y una sección a la derecha para colocar el titulo, el Opening Crawl y las tablas con la información básica de la película.

En primer lugar, creamos un contenedor <div class="container"> para alojar todo el contenido de la página:

<!DOCTYPE html>
<html>
  ...
  <body>
    <div class="container">
      <article>
        <h1>Episode I: The Phantom Menace</h1>
        ...
      </article>
    </div>
  </body>
</html>

Enseguida, creamos el contenedor <div class="row"> dentro del contenedor .container:

<!DOCTYPE html>
<html>
  ...
  <body>
    <div class="container">
      <div class="row">
        <article>
          <h1>Episode I: The Phantom Menace</h1>
          <img src="/media/images/starwars_episode_i.png" alt="Episode I: The Phantom Menace">
          ...
        </article>
      </div>
    </div>
  </body>
</html>

A continuación, creamos el contenedor <div class="col-md-3"> para crear la sección de la izquierda y el contenedor <div class="col-md-3"> para crear la sección de la derecha. Al mismo tiempo movemos la imagen dentro del contenedor .col-md-3 y el titulo, el Opening Crawl y las tablas dentro del contenedor .col-md-9:

<div class="row">
  <article>
    <div class="col-md-3">
      <img src="/media/images/starwars_episode_i.png" alt="Episode I: The Phantom Menace">
    </div>
    <div class="col-md-9">
      <h1>Episode I: The Phantom Menace</h1>
      ...
    </div>
  </article>
</div>

Para finalizar, agregamos la clase .img-responsive a la imagen, para que esta se adapte de forma automática al contenedor en el que se encuentra:

<img class="img-responsive" src="/media/images/starwars_episode_i.png" alt="Episode I: The Phantom Menace">

El resultado de aplicar los cambios ya mencionados se puede ver a continuación:

Aplicando estilos a las tablas

Bootstrap define varios estilos de tablas. Para aplicar el estilo básico, basta con agregar la clase .table a cualquier tabla:

<table class="table">
    ...
</table>

Si deseamos que las filas impares de la tabla tengan un color diferente, podemos agregar la clase .table-striped:

<table class="table table-striped">
    ...
</table>

Ahora, si queremos que las filas de la tabla cambien de color cuando el cursor está sobre ellas, agregamos la clase .table-hover:

<table class="table table-hover">
    ...
</table>

Siguiendo con nuestro sitio de ejemplo, vamos a aplicar la clase .table a la primera tabla, la clase .table-striped a la segunda tabla y la clase .table-hover a la tercera tabla. El resultado debe verse así:

Podemos ver que las tablas ocupan todo el ancho del contenedor en el que se encuentran, lo que hace que se exista bastante espacio en blanco en el interior. Para solucionar este problema visual, vamos a reducir el ancho de las tablas a la mitad.

Para esto, vamos a crear un contenedor <div class="row"> seguido de un contenedor <div class="col-md-6>" justo después del subtitulo General information. Finalmente, vamos a mover las tres tablas dentro del contenedor .col-md-6:

<h2>General information</h2>
<div class="row">
  <div class="col-md-6">
    <table class="table">
    ...
    </table>
    <table class="table table-striped">
    ...
    </table>
    <table class="table table-hover">
    ...
    </table>
  </div>
</div>

Lo que estamos haciendo aquí es creando una grilla dentro de otra. El nuevo contenedor .row nos permite dividir el ancho de la sección derecha de la pagina en doce columnas mas pequeñas. El contenedor .col-md-6 hace que el ancho de las tablas solo ocupe las primeras seis columnas de izquierda a derecha, es decir, la mitad del ancho que tenían anteriormente.

Las tablas rediseñadas deben verse de la siguiente forma:

Aplicando estilos al formulario

En la página dispuesta para agregar películas (simple_starwars_site/add-movie/index.html), existe un formulario HTML bastante simple y no muy agradable a la vista, el cual vamos a mejorar usando Bootstrap:

Para comenzar, debemos crear una grilla para alojar el formulario. Vamos a hacer que el formulario ocupe la mitad del ancho total de la página:

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <section>
          <h1>Add Movie</h1>
          <h2>Attribution information</h2>
          <form>
            ...
        </section>
      </div>
    </div>
  </div>
</body>

Ahora, vamos a agrupar los controles <label> con sus respectivos campos <input> o <textarea>, usando para ello un contenedor <div class="form-group">, de la siguiente forma:

<form>
  <div class="form-group">
    <label for="title">Title</label>
    <input id="title" type="text" name="title" value="">
  </div>
  <div class="form-group">
    <label for="opening-crawl">Opening Crawl</label>
    <textarea id="opening-crawl" name="opening-crawl" rows="8" cols="40"></textarea>
  </div>
  ...
</form>

Luego, vamos a agregar la clase .form-control a cada uno de los campos <input> y <textarea>:

<form>
  <div class="form-group">
    <label for="title">Title</label>
    <input class="form-control" id="title" type="text" name="title" value="">
  </div>
  <div class="form-group">
    <label for="opening-crawl">Opening Crawl</label>
    <textarea class="form-control" id="opening-crawl" name="opening-crawl" rows="8" cols="40"></textarea>
  </div>
    ...
</form>

Podemos ver que existen algunas líneas de texto de ayuda para algunos campos del formulario. Estas líneas de texto deben estar dentro del contenedor .form-group y se les debe agregar la clase .help-block:

<div class="form-group">
  <label for="directors">Director(s)</label>
  <textarea class="form-control" id="directors" name="directors" rows="8" cols="40"></textarea>
  <p class="help-block">One director per line.</p>
</div>

Por último, vamos a aplicarle estilos al botón del formulario agregando las clases .btn y .btn-default:

<input class="btn btn-default" type="submit" name="submit" value="Add movie">

Al terminar de aplicar los cambios, el formulario debe verse así:

Diseñando para dispositivos móviles

Con Bootstrap es posible adaptar la grilla a las pantallas de los diferentes dispositivos móviles. Hasta el momento solo hemos usado las clases .col-md-X para implementar el layout en todo el sitio.

En este caso, el layout solo funciona cuando la pantalla o la ventana del navegador tiene un ancho mayor o igual a 992 píxeles. Cuando el ancho es menor, las columnas simplemente se apilan una encima de otra.

Si queremos que el layout se mantenga para pantallas de menor tamaño, debemos hacer uso de las clases .col-sm-X, las cuales funcionan cuando el ancho de la pantalla es mayor o igual a 768 píxeles; o de las clases .col-xs-X, las cuales funcionan cuando el ancho de la pantalla es menor que 768 píxeles.

Dejamos cómo ejercicio para el lector, utilizar las clases .col-sm-X en lugar de .col-md-X en cada uno de los contenedores que definen las columnas en el sitio. Al terminar de hacer los cambios, la página debe verse así en el iPad:

Es importante aclarar que al usar las clases .col-sm-X, el layout seguirá manteniendo su estructura para pantallas de mayor tamaño.

Para concluir…

Bootstrap es el framework CSS y JavaScript mas popular para diseñar sitios y aplicaciones web adaptables a dispositivos móviles. En este artículo solo cubrimos una pequeña parte de todas las características disponibles.

La utilización de componentes como Navbar, Jumbotron, Page Header, Button Dropdowns, Thumbnails y Responsive Embed quedan en el tintero para un próximo artículo. Mientras tanto, el lector puede revisar la documentación oficial de Bootstrap para mayor información.

Todos los fragmentos de código mostrados en este artículo pueden ser consultados en éste repositorio Git alojado en Github.