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 y 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.
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 de 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 sección <head> de cada uno de los archivos HTML que se
encuentran en el directorio del sitio estático:
<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>
Descargando e instalando jQuery
Algunos componentes de Bootstrap utilizan código JavaScript y la librería jQuery para funcionar correctamente. A continuación vamos a descargar e instalar 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>
Configurando un servidor web ligero
Para visualizar el sitio web en el navegador web de manera apropiada, se recomienda usar un servidor web ligero. En este caso vamos a usar SimpleHTTPServer para Python 2.7 o http.server para Python 3.
Para iniciar el servidor ligero, ejecutamos los siguientes comandos desde la terminal:
$ cd simple-starwars-site/
>> Python 2.7
$ python -m SimpleHTTPServer 8080
>> Python 3
$ python -m http.server 8080
Probando la instalación de Bootstrap y jQuery
Para probar si Bootstrap y jQuery han sido instalados correctamente, cargamos la dirección http://localhost:8080 en nuestro navegador web. Si vemos que el estilo de la tipografía y el color de los enlaces ha cambiado, entonces el procedimiento ha sido exitoso:
Organizando la página de inicio
En la página de inicio, 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 que nos permite dividir el área de la página en una grilla de doce columnas por las filas que deseemos.
Este componente es completamente adaptable, lo que significa que el sitio web se ajustará automáticamente a la pantalla de cualquier dispositivo móvil y de escritorio.
Modificamos el archivo index.html, creando un contenedor <div
class="container"> en el <body> de la página. En él vamos a insertar la
etiqueta <section> que contiene el listado completo de las películas:
<body>
<div class="container">
<section>
<h1>Star Wars Movies</h1>
<p>Explore all official Star Wars movies.</p>
<article>...</article>
<article>...</article>
<article>...</article>
<article>...</article>
<article>...</article>
<article>...</article>
<article>...</article>
</section>
</div>
</body>
En seguida vamos a crear un contenedor <div class="row"> por cada pelicula en
el listado. Dentro de ellos vamos a insertar cada una de las etiquetas
<article> que contiene la información de cada película:
<section>
<h1>Star Wars Movies</h1>
<p>Explore all official Star Wars movies.</p>
<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>
<div class="row">
<article>
<h2><a href="/episode-ii/">Episode II: Attack of the Clones</a></h2>
<img src="/media/images/starwars_episode_ii.png" alt="Episode II: Attack of the Clones">
...
</article>
</div>
</section>
Ahora vamos a organizar el contenido de cada película en dos secciones. En la primera sección vamos a colocar la imagen del póster; y en la siguiente 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>
<p>Turmoil has engulfed the Galactic Republic. The taxation of trade routes to outlying star systems is in dispute.</p>
<p>Hoping to resolve the matter with a blockade of deadly battleships, the greedy Trade Federation has stopped all shipping to the small planet of Naboo.</p>
<p>While the Congress of the Republic endlessly debates this alarming chain of events, the Supreme Chancellor has secretly dispatched two Jedi Knights, the guardians of peace and justice in the galaxy, to settle the conflict...</p>
</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 encuentran los contenedores <div class="col-md-X">, que se
usan para definir las casillas 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 casilla que ocupa todo el ancho de la página, es decir doce columnas.
Ahora bien, hemos usado <div class="col-md-3"> para definir la casilla que
contiene la imagen y <div class="col-md-9"> para definir la casilla que
contiene el titulo y el texto.
Lo anterior significa que la casilla de la imagen va a ocupar las primeras tres columnas, de izquierda a derecha, y la casilla con el texto va a ocupar las restantes nueve columnas de cada fila.
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. Dejamos como ejercicio para el lector la modificación de las demás páginas.
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 mover la imagen del póster hacia la izquierda; y el titulo, el Opening Crawl y las tablas con la información básica de la película hacia la derecha.
Modificamos el archivo episode-i/index.html, creando un contenedor <div
class="container"> alrededor de la etiqueta <article> que aloja todo el
contenido de la página:
<body>
<div class="container">
<article>
<h1>Episode I: The Phantom Menace</h1>
<img src="/media/images/starwars_episode_i.png" alt="Episode I: The Phantom Menace">
<h2>Opening crawl</h2>
...
</article>
</div>
</body>
Enseguida creamos el contenedor <div class="row"> dentro del contenedor
container:
<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">
<h2>Opening crawl</h2>
...
</article>
</div>
</div>
</body>
A continuación, creamos el contenedor <div class="col-md-3"> para crear la
casilla para la imagen del póster; y el contenedor <div class="col-md-9"> para
crear la casilla para el titulo, el Opening Crawl y el resto del contenido:
<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>
<h2>Opening crawl</h2>
...
</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 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="col-md-6>" dentro de un
contenedor <div class="row"> alrededor de las tres tablas:
<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>
Como podrán observar, estamos creando una grilla dentro de otra. El nuevo
contenedor row nos permite dividir el ancho de la casilla 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 existe un formulario HTML bastante simple y no muy agradable a la vista, el cual vamos a mejorar usando Bootstrap:
Editamos el archivo add-movie/index.html y creamos una grilla para alojar el
formulario. El formulario va a ocupar 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>...</form>
</section>
</div>
</div>
</div>
</body>
Ahora creamos un contenedor <div class="form-group"> alrededor de cada campo
del formulario 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, agregamos la clase form-control a cada una de las etiquetas <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 algunos campos tienen un texto explicativo. 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, aplicamos 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 casillas de la grilla simplemente se apilan una encima de otra.
Si queremos que la distribución se mantenga para pantallas de menor tamaño,
debemos hacer uso de las clases col-sm-X, que se activan cuando el ancho de
la pantalla es mayor o igual a 768 píxeles; o de las clases col-xs-X para
cuando el ancho de la pantalla es menor que 768 píxeles.
Dejamos al lector cómo ejercicio utilizar las clases col-sm-X en lugar de
col-md-X en cada uno de los contenedores que definen las casillas de la
grilla. 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, la distribución se
seguirá manteniendo 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.
El sitio web modificado puede ser descargado desde éste repositorio Git alojado en Github.