Come si cambia il colore dei CSS Bootstrap di Twitter?

Question

Non ho usato meno prima di oggi.

ho cambiato il colore in preboot.less a:

// Color Scheme 
@baseColor:   @orange;     // Set a base color 

Poi ho rispettato i meno file. Tutto è venuto fuori, ma tutto era ancora blu.

Così ho provato il percorso js.less. Ancora blu.

Answer 1

Avete impostato la variabile @orange a un colore, come questo

@orange: #FF2400;

Answer 2

Se si utilizza la versione 2.0-WIP, questo è l'affare.

la classe .primary utilizza le variabili @blue e @blueDark per creare il gradiente del pulsante. Quelle variabili sono impostate nel file variables.less.

Nel file buttons.less, le altre classi di pulsanti sono hardcoded con valori esadecimali.

// Danger and error appear as red 
    &.danger { 
    .gradientBar(#ee5f5b, #c43c35); 
    } 
    // Success appears as green 
    &.success { 
    .gradientBar(#62c462, #57a957); 
    } 
    // Info appears as a neutral blue 
    &.info { 
    .gradientBar(#5bc0de, #339bb9); 
    } 

dovete cambiare quei valori esadecimali o creare le variabili di sostituire i valori esadecimali con. Sono nuovo nell'usare bootstrap da Twitter, ma questa sembra essere la situazione.

Answer 3

È possibile trovare utile il Bootstrap Generator: consente di scegliere i colori ecc. E genera un file CSS Boostrap compilato per te.

Answer 4

Ecco un generatore di temi di bootstrap che funziona da un'immagine .... Quindi puoi solo scattare una foto del tuo "vecchio" sito web, caricarlo qui e genererà un tema che corrisponde alla tua vecchia combinazione di colori!

Nota: al momento questo sito sembra essere offline. Se vuoi ancora questa funzione, you can install the site from it's Github repo, e provalo da lì.

http://www.lavishbootstrap.com/

e, naturalmente, avviarsi e permette di personalizzare i colori quando si scarica ora, ma che coinvolge un sacco di taglia e incolla di schemi di colore .... Lo strumento sopra capisce tutto fuori per si ...

http://getbootstrap.com/customize/

Answer 5

Questa è per il # 01a4d9 colore BTN

.btn { 
    border-color:#c5c5c5; 
    border-color:rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); 
} 

.btn-primary { 
    color:#ffffff; 
    text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25); 
    background-color:#007cc5; 
    background-image:-moz-linear-gradient(top, #01a4d9, #0193c5); 
    background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#01a4d9), to(#0193c5)); 
    background-image:-webkit-linear-gradient(top, #01a4d9, #0193c5); 
    background-image:-o-linear-gradient(top, #01a4d9, #0193c5); 
    background-image:linear-gradient(to bottom, #01a4d9, #0193c5); 
    background-repeat:repeat-x; 
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0096c5', endColorstr='#ff0054c5', GradientType=0); 
    border-color:#0193c5 #0193c5 #003479; 
    border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); 
    *background-color:#0193c5;filter:progid:DXImageTransform.Microsoft.gradient(enabled = false); 
} 

.btn-primary:hover,.btn-primary:active,.btn-primary.active,.btn-primary.disabled,.btn-primary[disabled] { 
    color:#ffffff; 
    background-color:#0193c5; 
    *background-color:#0049ac; 
} 

.btn-primary:active,.btn-primary.active { 
    background-color:#003f92 \9; 
} 

Answer 6

per personalizzare il colore dei tuoi link e .btn-primario (che è quello che penso che la domanda si riferiva a), regolare il @linkColor:

@linkColor: @orange;