你如何改变Twitter的Bootstrap CSS的颜色?

时间:2011-08-22 01:45:08

标签: css less twitter-bootstrap

我今天之前没有用过。

我将preboot.less中的颜色更改为:

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

然后我编写了较少的文件。这一切都出来了,但一切都还是蓝色的。

所以我尝试了js.less路线。还是蓝的。

6 个答案:

答案 0 :(得分:11)

这是一个可以从图片中运行的引导主题生成器....所以你可以拍一张你的“旧”网站的照片,在这里上传它,它会生成一个与你原来的配色方案相匹配的主题! / p>

注意:此网站目前似乎处于离线状态。如果您仍需要此功能you can install the site from it's Github repo,请从那里尝试。

http://www.lavishbootstrap.com/

当然,Bootstrap本身允许您在下载时自定义颜色,但这涉及到大量的颜色方案的剪切和粘贴....上面的工具为您解决了这一切......

http://getbootstrap.com/customize/

答案 1 :(得分:4)

您可能会发现Bootstrap Generator很有用 - 它可以让您选择颜色等,并为您生成一个已编译的Boostrap CSS文件。

答案 2 :(得分: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,但这似乎就是这种情况。

答案 3 :(得分:0)

您是否已将@orange变量设置为颜色,如此

@orange: #FF2400;

答案 4 :(得分:0)

这个用于#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;
 }

答案 5 :(得分:0)

要自定义链接和.btn-primary的颜色(这是我认为问题所指的),请调整@linkColor:

@linkColor: @orange;