logo标签列表

如何更改Twitter Bootstrap CSS的颜色？

csslesstwitter-bootstrap
17

我今天之前没有使用过less。

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

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

我随后编译了less文件。一切都完成了，但是所有的东西仍然是蓝色的。

于是我尝试了js.less方法。仍然是蓝色的。

6个回答
11
这是一个基于图片的Bootstrap主题生成器... 所以你可以拍一张你“旧”网站的照片，在这里上传，它会生成一个与你旧网站颜色方案相匹配的主题！
注意：该网站目前似乎已经离线。如果你仍然需要此功能，你可以从它的Github存储库安装该站点并在那里尝试。

http://www.lavishbootstrap.com/

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

http://getbootstrap.com/customize/

1
Lavish Bootstrap的网站目前已经无法访问（在2015年8月仍然可以访问）。新的官方Bootstrap定制工具位于http://getbootstrap.com/customize/。 - Bruce van der Kooij
4
你可能会发现Bootstrap Generator很有用，它让你可以选择颜色等选项，并为你生成编译好的Bootstrap CSS文件。
3
请从以下链接下载Bootstrap 2版本：http://twitter.github.com/bootstrap/download.html - Marty
是的，没错。在过去的两年里肯定有所改变。 - Phil Gyford
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 还不熟悉，但似乎这就是情况。

能不能不用less实现呢？我安装了less，修改了一些东西，然后就出现了大量的编译错误... - Juanito Fatas
我基本上因为错误的原因停止使用Less。 如果您这样做，您必须在boostrap.css文件中或者无论您从bootstrap中放置所有CSS的位置中直接编辑不同的类。 您必须直接在CSS中编辑所有类。 在2.0 = wip中，按钮类为.btn，.primary，.info，.danger。 在最终发布版中，它们可以在此处找到http://twitter.github.com/bootstrap/base-css.html#buttons。 - wuliwong
0

这是用于 #01a4d9 颜色的按钮

.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;
 }
0
你是否已经将变量@orange设置为颜色，就像这样：

@orange: #FF2400;

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

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

@linkColor: @orange;
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接