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

我改變了顏色preboot.less到：

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

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

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

來源

2011-08-22 speg

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

@orange: #FF2400;

來源

2011-08-22 02:26:13

這已經完成。原來的按鈕顏色和鏈接都是基於他們自己的變量，並且不要使用@baseColor呢.. – speg

如果您正在使用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的新手，但這似乎是情況。

來源

2012-01-18 20:31:10 wuliwong

可以實現沒有更少？我安裝少了，改變了一些東西，然後得到了大量的編譯錯誤... – juanitofatas

我基本上停止使用少也因爲錯誤。如果你這樣做了，你必須在boostrap.css文件中編輯不同的類，或者從引導中放置所有的CSS。你必須直接在CSS中編輯所有的類。在2.0 = wip中，按鈕類是.btn，.primary，。info，.danger我想。在最終版本中，可以在http://twitter.github.com/bootstrap/base-css.html#buttons找到它們。 – wuliwong

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

來源

2012-01-19 17:05:59

這應該用於版本2：http：//twitter.github.com/bootstrap/download.html – Marty

@菲爾，你的第一個鏈接似乎死了... – AlexB

是的，這是。過去2年以上必須改變。 –

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

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

http://www.lavishbootstrap.com/

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

http://getbootstrap.com/customize/

來源

2012-05-09 13:46:28

Lavish Bootstrap的網站目前已經死亡（2015年8月仍然有效）。新的官方Bootstrap定製程序位於http://getbootstrap.com/customize/ –

這其中的＃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; 
}

來源

2013-01-30 15:36:18 goldyorchita

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

@linkColor: @orange;

來源

2013-03-01 05:28:39

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

回答

相關問題