你如何改变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;