Overriding Twitter Bootstrap

Question

Je travaille sur une application Rails 3.2 avec Twitter Bootstrap. J'essaie de remplacer les couleurs de Bootstrap dans bootstrap_and_overrides.css.less.

J'ai été capable de remplacer les couleurs en utilisant les variables LESS. Par exemple:

@navbarBackground: @blue; 
    @navbarBackgroundHighlight: @blueDark; 

Cependant, je veux dévier des variables de couleur. Je ne peux pas sembler mettre dans une couleur hexagonale comme 5092CC. Je ne veux pas redéfinir les variables de couleur dans MOINS parce que j'ai lu cela peut causer des problèmes sur la route. J'essaye aussi de changer les couleurs pour toutes les étiquettes de vedettes. Je veux qu'ils soient tous de la même couleur. Mais, Bootstrap ignore tous les changements que j'ai essayés. Ma dernière tentative était:

h1, h2, h3, h4, h5, h6 { 
     color: 325B7F; 
     small { 
     color: 325B7F; 
     } 
    } 

Je suis vraiment confus entre CSS régulier et moins. Je me suis battu la plupart de la journée.

Toute aide est grandement appréciée.

Answer 1

Je ne suis pas familier avec Rails. Toutefois, que vous utilisiez CSS ou LESS, vous devez toujours ajouter un #.

h1, h2, h3, h4, h5, h6 { 
    color: #325B7F; 
    small { 
    color: #325B7F; 
    } 
} 

Si cela ne vous devriez avoir travaillé un regard sur le fichier variables.less de bootstrap. Modifiez les variables couleurs (@blue et @blueDark) à tout ce dont vous avez besoin et recompiler le CSS

Addition:

Voilà comment j'Ecraser variables Bootstraps, sans avoir besoin de modifier les fichiers bootstrap directement. J'ai un fichier appelé mysite.less:

// bootstrap less files located in another folder 
@import "../../bootstrap/less/bootstrap.less"; 
@import "../../bootstrap/less/responsive.less"; 

// mysite overwrites located in my own project folder 
@import "variables.less"; 

Dans variables.less redéfinissent les variables que vous souhaitez remplacer:

@blue: #123456; 
@blueDark: #678912; 

Et enfin compiler votre CSS:

lessc mysite.less > bootstrapincludingmyoverwrites.css