Bootstrap en 5 minutos

En el artículo anterior conté cómo estructurar un proyecto que utiliza Bootstrap, la librería CSS/JS de Twitter. Ahora viene el artículo que cuenta cómo usar Bootstrap :D

Es importante comenzar con un proyecto nuevo. No tratéis de usar Bootstrap directamente sobre un proyecto existente, ya que es desesperante. Una vez que tengáis un poco de soltura ya no será un problema.

Y sabed que soy un completo novato en lo que al tema se refiere, así que estaré hablando desde la mayor de las ignorancias :D

Maquetación

Bootstrap nos da algunas clases orientadas a la maquetación. Gracias a ellas resultará muy sencillo soportar dispositivos de pantallas pequeñas. A esto es lo que se le conoce como Scaffolding.

De manera muy básica: todo va dentro de .container, que a menudo contendrá .row. Si queremos que un elemento dentro del .row ocupe varias “columnas”, basta con pedir que nos lo expanda. Así, se puede usar .span4 para usar 4 columnas. El modelo básico de Bootstrap contiene 12 columnas.

Ejemplo:

1
2
3
4
5
6

<div class="container">
  <div class="row">
    <div class="span4">...</div>
    <div class="span8">...</div>
  </div>
</div>

Si estamos usando algún lenguaje de plantillas, como liquid, jinja2 o algún otro, yo recomiendo utilizar una plantilla sólo para la estructura básica y meter cada elemento en otra plantilla. Eso facilitará la gestión y mobilidad de elementos.

Hay mucho que decir sobre la maquetación, pero no voy a contar nada más. Temo que el resto tendréis que descubrirlo vosotros.

Elementos básicos

Bootstrap nos da un estilo bastante molón para los elementos más generales: enlaces, títulos, formularios, listas,… Así, gratis, sin hacer nada de nada.

Además, nos ofrece clases para decorar otros elementos, como los button, que se pueden decorar con .btn para obtener una vista más chula e, incluso, cambiarle el color añadiendo .btn-info, .btn-success, .btn-warning, etc. También podremos cambiar el tamaño con .btn-large, .btn-small o deshabilitarlos con .disabled.

También nos ofrece distintos botones que podemos usar sin mucho problema.

No pongo ejemplos porque está todo muy clarito en la propia documentación de Bootstrap.

Colocación

También tenemos ayuda para colocar los elementos, por lo que podemos usar .pull-left o .pull-right.

Barras de navegación

Una de las cosas más molonas son las barras de navegación (o barra de menú). Resultan muy sencillas de crear y quedan muy vistosas. Voy a centarme un poco en ellas.

Una barra de navegación es un .navbar. Ésta debe incluir un .navbar-inner que, a su vez, tendrá un .container:

1
2
3
4
5
6
7

<div class="navbar">
  <div class="navbar-inner">
    <div class="container">
    ...
    </div>
  </div>
</div>

Podemos fijar el .navbar arriba con .navbar-fixed-top o abajo con .navbar-fixed-bottom. Sin embargo, si hacemos esto será necesario añadir un poco de padding al body en nuestra css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

body {
  padding-top: 60px;
  padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
  body {
    padding-top: 0px;
    padding-bottom: 0px;
  }
}

En este ejemplo he añadido el código necesario para que nuestro menú funcione correctamente en dispositivos pequeños, donde no tendrá el padding.

No entraré en cómo añadir el título de la página ni formularios de búsqueda, ya que no creo que os cueste si entendéis todo lo demás.

También se puede hacer que el menú se minimice en un botón para pantallas pequeñas mediante el atributo data-toggle="collapse", indicando qué tiene que minimizar con el atributo data-target=".nav-collapse". Como véis, este atributo tiene como valor una consulta, que tiene que devolver lo que debe expandirse al pulsar el botón. Será necesario que añadáis Bootstrap Responsive para que funcione correctamente con los dispositivos pequeños. Tenéis ejemplos en la documentación.

Otras pijadas

Además tenéis ventanas modales, desplegables, pestañas, alertas, carrusel de imágenes y otras utilidades típicas de estos frameworks.

Lo único que echo en falta es un datepicker, pero no se puede tener todo :D

Si sólo queréis maquetación, no es necesario que añadáis el JavaScript. Para las barras de navegación con subpaneles y otros elementos interactivos sí será necesario. Las hojas de estilos CSS serán necesarias siempre.

Utilidad

Bootstrap nos permite generar un sitio web vistoso en muy poco tiempo. Los que no tenemos dotes de diseñadores hemos visto una verdadera ayuda en esta pequeña librería CSS/js.

Espero que vosotros también le veáis utilidad a este pequeño artículo :D