Tutorial de Bootstrap 3: Personalizando Bootstrap

Bootstrap está muy bien, pero, ¿Y si quiero dar mi toque personal o añadir algo que no tengo por defecto en él? No te preocupes, se puede y es muy fácil. Para ello tendremos que tener unos conocimientos medios de CSS3.

Aconsejo no modificar ningún archivo de Bootstrap , así cuando se actualice el framework a una nueva versión no tendremos que modificar ningún archivo, simplemente enlazar el archivo que nosotros mismos creamos.
 

Creando CSS personalizado.

Lo que haremos es crear nuestra hoja de estilo personalizada , la podemos escribir en LESS o CSS. Eso ya dependerá de los conocimientos y gustos personales. Bien, ya tenemos nuestra nueva hoja de estilo con nuestro código listo para exportar a nuestro diseño .

Como ya sabes, y como hicimos para utilizar Bootstrap en nuestro diseño , vamos a definir la hoja de estilo que nosotros hemos creado en nuestra página Web.

Para definir nuestro CSS , tenemos que añadir en el head de nuestro documento HTML mediante la etiqueta link la ruta de nuestro archivo. Puedes tener todos los archivos CSS quieras en tu página Web , aunque no es una práctica muy recomendada.

Así debería de quedar la estructura básica de nuestro HTML para utilizar Bootstrap y nuestra hojas de estilo propia:

La estructura básica del proyecto que utilizamos en el ejemplo es:

Carpeta del Proyecto/ 
├── index.html 
├── css/ 
│   ├── bootstrap.min.css 
│   ├── bootstrap-theme.min.css 
│   └── mi_hoja_de_estilos.css
├── js/ 
│   └── bootstrap.min.js 
└── fonts/ 
    ├── glyphicons-halflings-regular.eot 
    ├── glyphicons-halflings-regular.svg 
    ├── glyphicons-halflings-regular.ttf 
    └── glyphicons-halflings-regular.woff
 

Esta estructura no es obligatoria, puedes tener la que tu quieras, pero recuerda de colocar bien las rutas hacía los archivos para que funcione bien todo correctamente.

Personalizar elementos de Bootstrap

Si queréis modificar algo que ya existe en Bootstrap, la mejor opción es copiarlo y añadir la modificación en nuestra hoja de estilo personalizada. No lo hagas en el css de Bootstrap, para no tener que estar haciendo cambios con cada actualización del framework de Twitter.

Por ejemplo, queremos un botón parecido a .btn-primary, copiamos todo el código del botón del archivo CSS de Bootstrap y lo pegamos en nuestro archivo, cambios el nombre de .btn-primary, por otro que tu quieras y hacemos las modificaciones necesarias en el código. Luego cuando queramos usar el botón que hemos creado, lo utilizamos con class="nombreDelBoton".

Recuerda , no hagas modificaciones en los archivos orignales de B<ootstrap , para poder actualizar a la última versión sin problemas.
 

Eliminando lo que sobra

Lo bueno que tiene Bootstrap es que tenemos una gran cantidad de elementos y opciones por defecto, la única pega es que no utilizamos todas éstas. Por tanto, tendremos un exceso de código que no nos valdrá para nada.

¿Cómo hago para eliminar lo que sobra? Lo primero que haremos es desarrollar nuestra Web con todas las opciones por defecto, una vez que ya hemos terminado nuestro diseño. Vemos qué no hemos necesitado y vamos al personalizador de Bootstrap.

Una vez que estamos dentro de la Web, desmarcamos los elementos que estamos seguro que no utilizaremos y nos descargamos el archivo que hemos generado y lo reemplazamos por el antiguo, así tendremos una versión de Bootstrap más compilada y comprimida.

Os animo a seguir aprendiendo en la documentación oficial de Bootstrap.