你如何改变 Twitter 的 Bootstrap CSS 的颜色？答案

【问题标题】：How do you change the colour of Twitter's Bootstrap CSS?你如何改变 Twitter 的 Bootstrap CSS 的颜色？
【发布时间】：2011-10-31 19:52:15
【问题描述】：

今天之前我没少用过。

我将 preboot.less 中的颜色改为：

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

然后我编译了较少的文件。一切都出来了，但一切仍然是蓝色的。

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

【问题讨论】：

标签： css less twitter-bootstrap

【解决方案1】：

这是一个基于图片的引导主题生成器......因此，您只需为您的“旧”网站拍照，然后将其上传到此处，它就会生成一个与您的旧配色方案相匹配的主题！

注意：此站点目前似乎处于离线状态。如果您仍然想要此功能，you can install the site from it's Github repo，然后从那里尝试。

http://www.lavishbootstrap.com/

当然，Bootstrap 本身允许您在现在下载它时自定义颜色，但这涉及到大量剪切和粘贴配色方案...。上面的工具为您解决了所有问题...

http://getbootstrap.com/customize/

【讨论】：

Lavish Bootstrap 的网站目前已经死了（2015 年 8 月仍在工作）。新的官方 Bootstrap 定制器位于getbootstrap.com/customize

【解决方案2】：

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

【讨论】：

这应该用于版本 2：twitter.github.com/bootstrap/download.html
是的。必须在过去 2 年以上发生变化。

【解决方案3】：

如果您使用的是 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 使用引导程序的新手，但这似乎是这种情况。

【讨论】：

能不能少一点？我安装的少，改变了一些东西，然后得到了大量的编译错误......
由于错误，我基本上已经停止使用 Less。如果你这样做，你必须编辑 boostrap.css 文件中的不同类，或者你将所有 CSS 从引导程序中放置的地方。您必须直接在 CSS 中编辑所有类。在 2.0=wip 中，我认为按钮类是 .btn、.primary、.info、.danger。在最终版本中，它们可以在这里找到twitter.github.com/bootstrap/base-css.html#buttons。

【解决方案4】：

您是否将@orange 变量设置为一种颜色，像这样

@orange: #FF2400;

【讨论】：

已经完成了。原来按钮颜色和链接都是基于它们自己的变量，还没有使用@baseColor ..

【解决方案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;
 }

【讨论】：

【解决方案6】：

要自定义链接和 .btn-primary 的颜色（我认为问题所指的颜色），请调整@linkColor：

@linkColor: @orange;

【讨论】：