你如何改变 Twitter 的 Bootstrap CSS 的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7142417/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do you change the colour of Twitter's Bootstrap CSS?
提问by speg
I've not used less before today.
我今天之前没有少用。
I changed the colour in preboot.less to:
我将 preboot.less 中的颜色更改为：
// Color Scheme
@baseColor: @orange; // Set a base color
I then complied the less files. It all came out, but everything was still blue.
然后我编译了较少的文件。一切都出来了，但一切仍然是蓝色的。
So I tried the js.less route. Still blue.
所以我尝试了 js.less 路线。还是蓝色。
回答by Brad Parks
Here's a bootstrap theme generator that works from a picture.... So you can just take a picture of your "old" website, upload it here, and it'll generate a theme that matches your old color scheme!
这是一个从图片中工作的引导程序主题生成器......所以你可以给你的“旧”网站拍一张照片，上传到这里，它会生成一个与你的旧配色方案相匹配的主题！
Note: This site appears to be offline at the moment. If you still want this feature, you can install the site from it's Github repo, and try it from there.
注意：此站点目前似乎处于离线状态。如果你仍然想要这个功能，你可以从它的 Github repo 安装该站点，然后从那里尝试。
http://www.lavishbootstrap.com/
http://www.lavishbootstrap.com/
and of course Bootstrap itself allows you to customize the colors when you download it now, but that involves lots of cutting and pasting of color schemes.... The tool above figures it all out for you...
当然，Bootstrap 本身允许您在现在下载时自定义颜色，但这涉及大量剪切和粘贴配色方案......上面的工具为你计算了一切......
回答by Phil Gyford
You might find the Bootstrap Generatoruseful - it lets you choose colours etc and generates a compiled Boostrap CSS file for you.
您可能会发现Bootstrap Generator很有用 - 它可以让您选择颜色等并为您生成一个已编译的 Boostrap CSS 文件。
回答by wuliwong
If you are using 2.0-wip version, this is the deal.
如果您使用的是 2.0-wip 版本，这就是交易。
the .primary class uses the @blue and @blueDark variables for creating the button's gradient. Those variables are set in the variables.less file.
.primary 类使用@blue 和@blueDark 变量来创建按钮的渐变。这些变量在 variables.less 文件中设置。
In the buttons.less file, the other button classes are hard-coded with hex values.
在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);
}
You have to change those hex values or create variables that you replace the hex values with. I'm new to using bootstrap from twitter myself, but this appears to be the situation.
您必须更改这些十六进制值或创建用于替换十六进制值的变量。我自己是从 twitter 使用引导程序的新手，但这似乎就是这种情况。
回答by Jason Gennaro
Have you set the @orangevariable to a color, like this
你有没有将@orange变量设置为颜色，像这样
@orange: #FF2400;
@orange: #FF2400;
回答by goldyorchita
This one for the #01a4d9 color btn
这是 #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 ;
}
回答by Josh W Lewis
To customize the color of your links and .btn-primary (which is what I think the question was referring to), adjust the @linkColor:
要自定义链接和 .btn-primary 的颜色（这是我认为问题所指的），请调整 @linkColor：
@linkColor: @orange;
