1.10. Personalizando Bootstrap (Bootstrap 3, el manual oficial)

La forma más sencilla de personalizar Bootstrap es tratarlo de la misma manera que cualquier otra dependencia de tu proyecto. De esta forma, cuando Bootstrap publique una actualización, será muy sencillo incorporar esos cambios en tus proyectos.

Una vez descargado Bootstrap y enlazado su archivo CSS en tus plantillas, ya puedes personalizar el aspecto y el comportamiento de sus componentes. Para ello, crea una nueva hoja de estilos (en formato LESS o, si lo prefieres, directamente con CSS) para definir tus cambios.

¿Compilado o comprimido? A menos que tengas que estudiar sus contenidos, siempre es mejor utilizar la versión comprimida (bootstrap.min.css) en vez de la versión simplemente compilada (bootstrap.css).

Los contenidos de los dos archivos son exactamente los mismos, pero la versión comprimida ocupa muchísimo menos. De esta forma consumirás menos ancho de banda y las páginas se cargarán más rápido, especialmente en los servidores de producción.

Después de crear esta hoja de estilos propia, ya puedes incluir todos los componentes de Bootstrap y código HTML que quieras para crear tus plantillas.

1.10.1. Personalizando los componentes de Bootstrap

La personalización de los componentes de Bootstrap se puede dividir en dos tipo: cambios pequeños en el diseño de los componentes y rediseño gráfico completo de los componentes.

Los cambios pequeños son modificaciones en los elementos gráficos básicos del componente, como su color o el tamaño y tipo de letra. Un buen ejemplo de cómo conseguirlo es el Twitter Translation Center (que ha sido creado por uno de los autores de Bootstrap). A continuación se muestra a modo de ejemplo cómo se creó el botón personalizado de ese sitio web, cuya clase CSS es .btn-ttc.

En primer lugar, en vez de utilizar los botones que incluye Bootstrap (que sólo requieren añadir la clase .btn), se definió una nueva clase CSS propia llamada .btn-ttc. De esta forma se reduce al mínimo el esfuerzo de crear un estilo gráfico propio.

<button type="button" class="btn btn-ttc">Guardar cambios</button>

En la hoja de estilos CSS propia, se añadieron los siguientes estilos:

/* Botón propio
-------------------------------------------------- */

/* Redefine los estilos de .btn */
/* Modificar el texto y el color de fondo en los tres estados
   principales del botón: default, hover y active. */
.btn-ttc,
.btn-ttc:hover,
.btn-ttc:active {
  color: white;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #007da7;
}

/* Aplicar gradientes de colores */
/* Nota: no se muestran aquí todos los gradientes que tendrás que
   definir para los diferentes navegadores. */
.btn-ttc {
  background-repeat: repeat-x;
  background-image: linear-gradient(top, #009ED2 0%, #007DA7 100%);
  ...
}

/* Estilos del estado :hover del botón */
/* Uno de los estilos más sencillos y eficaces para el estado :hover
   consiste en subir hacia arriba ligeramente la imagen de fondo del
   botón, pero puedes definir otros estilos adicionales si quieres. */
.btn-ttc:hover {
  background-position: 0 -15px;
}

Personalizar el diseño de los componentes de Bootstrap lleva su tiempo, pero es bastante sencillo. Te aconsejamos que mires el código fuente de Bootstrap y copies los selectores del elemento que quieres modificar. Pega estos selectores después de todo el código de Bootstrap y así habrás redefinido los estilos de ese componente fácilmente. A modo de resumen, este es el flujo de trabajo recomendado:

Para cada componente que quieras modificar, busca sus estilos en el archivo CSS compilado de Bootstrap.
Copia y pega todos los selectores de ese elemento. Para personalizar por ejemplo la imagen o color de fondo de la barra de navegación, copia el selector .navbar.
Añade todo tu código CSS en una hoja de estilos independiente, utilizando los selectores que has copiado anteriormente. De esta forma no es necesario que añadas más clases a tus selectores o que utilices la palabra clave !important en las declaraciones de tus estilos.
Repite este proceso para todos los componentes que quieras personalizar.

Modificar completamente el diseño gráfico de un componente es igual de sencillo, pero cuesta muchísimo más tiempo. Observa el código del sitio Karma para ver un ejemplo de personalización avanzada de Bootstrap.

Otras formas de personalizar Bootstrap Aunque no es algo que se recomiende para los diseñadores que estén empezando con Bootstrap, existen otras dos formas de personalizar los componentes. La primera consiste en modificar el código fuente de los archivos .less (lo que dificulta enormemente la actualización posterior de Bootstrap) y la segunda consiste en definir tus propios mixins tal y como se explica en este artículo.

1.10.2. Eliminando los componentes innecesarios

No todos los sitios y aplicaciones web necesitan todos los componentes de Bootstrap. Esto es especialmente importante en los servidores de producción, donde el ancho de banda extra consumido por los componentes que no se utilizan puede suponer un gran coste.

Por este motivo, te animamos a que utilices el personalizador de Bootstrap, que te permite crear una versión personalizada de Bootstrap que incluye solamente los componentes que necesitas.

Gracias a este personalizador, puedes desactivar cualquier componente, imagen o elemento que no necesites. Una vez creado tu propio Bootstrap, descárgalo y utiliza estos archivos CSS y JavaScript en vez de los archivos por defecto de Bootstrap. Todo seguirá funcionando igual de bien, pero el Bootstrap de tu sitio o aplicación ya no incluirá ni estilos CSS ni código JavaScript que no vas a utilizar. Además, estas versiones personalizadas de Bootstrap también incluyen dos variantes, la compilada y la compilada + comprimida.