你如何改變Twitter的Bootstrap CSS的顏色？

Question

今天我還沒有用過。

我改變了顏色preboot.less到：

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

然後我遵循的減檔。這一切都出來了，但一切仍然是藍色的。

所以我嘗試了js.less路線。仍然是藍色。

Answer 1

有你@orange變量設置爲一種顏色，這樣

@orange: #FF2400;

Answer 2

如果您正在使用2.0版本的WIP，這就是交易。

.primary類使用@blue和@blueDark變量來創建按鈕的漸變。這些變量設置在variables.less文件中。

在buttons.less文件中，其他按鈕類以十六進制值進行硬編碼。

// 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); 
    } 

您必須更改這些十六進制值或創建用十六進制值替換的變量。我自己是從twitter開始使用bootstrap的新手，但這似乎是情況。

Answer 3

你可能會發現Bootstrap Generator很有用 - 它可以讓你選擇顏色等，併爲你生成一個編譯好的Boostrap CSS文件。

Answer 4

這裏有一個bootstrap主題生成器，可以根據圖片生成....所以你可以拍一張你的「舊」網站的圖片，在這裏上傳，它會生成一個與你的舊配色方案相匹配的主題！

注意：此網站目前似乎處於脫機狀態。如果你仍然需要這個功能，you can install the site from it's Github repo，並從那裏嘗試。

http://www.lavishbootstrap.com/

當然和引導本身可以讓你當你下載它現在自定義顏色，但涉及大量的切割和配色方案的粘貼....上面的數字工具，這一切爲你...

http://getbootstrap.com/customize/

Answer 5

這其中的＃01a4d9顏色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

要自定義您的聯繫和.btn小學（這是我認爲這個問題是指）的顏色，調整@linkColor：

@linkColor: @orange;