twitter-bootstrap
Personalización de estilo de Bootstrap de Twitter
Buscar..
Observaciones
Una cosa a tener en cuenta es que uno tiene que mencionar el nombre custom.css después del bootstrap.css principal, de lo contrario, los valores de custom.css no se implementarán realmente.
Anulación de CSS predeterminado
Todo el mundo ama el bootstrap de Twitter , pero a algunos de nosotros no nos gusta su diseño predeterminado. Así que aquí hay una guía simple sobre cómo comenzar a personalizar el diseño de boostrap. El refuerzo de Twitter cuando se clona proporciona un conjunto de archivos css predeterminados que podemos anular.
El archivo css de correo que debemos anular es boostrap.min.css
en el directorio boostrap/dist/css
.
Para anular el diseño predeterminado de boostrap, siga estos 2 sencillos pasos.
custom.css
uncustom.css
(o puedecustom.css
nombre que desee) y vincularlo a suindex.html
<html> <head> <title>Customize Bootstrap</title> <link rel="stylesheet" type="text/css" href="path/to/bootstrap.min.css"> <!-- This mus be declared after the bootstrap.min.css --> <link rel="stylesheet" type="text/css" href="path/to/your/custom.css"> </head> <body> <!-- Do something --> </body> </html>
Empezar a personalizar. Por ejemplo, queremos cambiar el color del botón predeterminado. Si desea utilizar el estilo de botón predeterminado de bootstrap, debe agregar la clase
btn
en su etiqueta<button class="btn">Sample</button>
. Simplemente escriba el siguiente código en sucustom.css
..btn{ background-color:red; }
El código de arriba producirá algo como esto.
Defecto :
Personalizado :
Esta técnica nos evitará reescribir todos los estilos de botones que ya fueron escritos por los colaboradores de boostrap. Esto también nos salvó de escribir nuestra propia clase de css, que para mí es menos tediosa.