Capítulo 2. Diseñando con rejilla (Bootstrap 3, el manual oficial)

2.1. Preparando la página

Antes de comenzar a diseñar el layout o estructura de contenidos de las páginas, es necesario realizar algunos preparativos importantes.

2.1.1. Se requiere el doctype de HTML5

Bootstrap utiliza algunos elementos HTML y algunas propiedades CSS que requieren el uso del doctype de HTML5. No olvides incluir este doctype en todas tus páginas con el siguiente código:

<!DOCTYPE html>
<html lang="es">
  ...
</html>

2.1.2. El móvil es lo más importante

Bootstrap 2 incluía algunas utilidades para hacer que las páginas se adaptaran a los dispositivos móviles. Bootstrap 3 se ha creado desde cero pensando en los móviles. Así que en vez de incluir algunos estilos opcionales para móviles, todo eso ya está incluido en el propio Bootstrap. Por eso nos gusta decir que para Bootstrap 3, los dispositivos móviles son lo más importante.

Para que las páginas se muestren correctamente y el zoom funcione bien en los dispositivos móviles, es importante que añadas la siguiente etiqueta dentro de la cabecera <head> de las páginas:

<meta name="viewport" content="width=device-width, initial-scale=1">

Si quieres deshabilitar el zoom en tus páginas, añade la propiedad user-scalable=no a la etiqueta anterior:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

Al añadir la propiedad user-scalable=no, los usuarios ya no podrán hacer zoom en la página y solamente podrán hacer scroll en sus contenidos. El resultado es que el comportamiento de la página se parece más al de una aplicación móvil nativa. En cualquier caso, limitar las libertades de los usuarios puede ser contraproducente y por tanto, no te recomendamos que utilices esta opción en todos tus sitios.

2.1.3. Imágenes responsive

Bootstrap 3 ya no adapta el tamaño de las imágenes automáticamente como sucedía en Bootstrap 2. Para mantener el mismo comportamiento de antes, debes añadir la clase .img-responsive a cada imagen que quieras que se comporte de manera responsive. Esta clase incluye las propiedades max-width: 100%; y height: auto; para que la imagen escale en función del tamaño del elemento en el que se encuentra.

<img src="..." class="img-responsive" alt="Imagen responsive">

2.1.4. Tipografía y enlaces

Bootstrap establece una serie de estilos por defecto para la tipografía de todos los elementos y para los enlaces de la página. En concreto:

Se establece a blanco el color de fondo del body con la propiedad background-color: white;
Se utiliza el valor de las variables @font-family-base, @font-size-base y @line-height-base definidas por LESS como atributos de las propiedades tipográficas de los elementos.
Se establece el color de los enlaces al valor de la variable @link-color de LESS y sólo se muestran los enlaces subrayados en el estado :hover

Esta primera inicialización de estilos se define en el archivo scaffolding.less.

2.1.5. Normalización de estilos

Para homogeneizar los estilos iniciales en los diferentes navegadores, Bootstrap utiliza la hoja de estilos Normalize, que es un proyecto creado por Nicolas Gallagher y Jonathan Neal.

2.1.6. Centrando los contenidos de la página

Si quieres centrar una página respecto a la ventana del navegador, encierra sus contenidos dentro de un elemento y aplícale la clase .container:

<div class="container">
  ...
</div>

La anchura del contenedor varía en cada punto de ruptura del diseño para adaptarse a la rejilla. Los contenedores no se pueden anidar debido a la propiedad padding y a su anchura fija.