CSS 设计 Twitter 引导程序按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10659070/
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
Styling twitter bootstrap buttons
提问by Elias7
Twitter-Bootstrap buttons are awesomely beautiful. Try them out by scrolling over them
Twitter-Bootstrap 按钮非常漂亮。通过滚动它们来尝试它们
But they are limited in colors.
但它们的颜色有限。
Is there any way I could change the base color of the button while keeping the beautiful hover-over effect that bootstrap has made so beautiful and effortless?
有什么办法可以改变按钮的基色，同时保持引导程序制作的漂亮和轻松的漂亮悬停效果？
I am completely unaware of what the css/javascript looks like that twitter uses to maintain those effects.
我完全不知道 twitter 用来维护这些效果的 css/javascript 是什么样的。
采纳答案by Tanvir Ahmed
Basically, the buttons in Twitter Bootstrap are controlled in CSS by ".btn{}". What you have to do is go to the CSS file and find where it says "btn" and change the color settings. However, it's not as simple as just doing that since you also have to change what color the button changes into when you highlight it, etc. To do THAT, you have to look for other tags in CSS like ".btn:hover{}", etc.
基本上，Twitter Bootstrap 中的按钮在 CSS 中由“.btn{}”控制。您需要做的是转到 CSS 文件并找到它显示“btn”的位置并更改颜色设置。但是，这并不像这样做那么简单，因为您还必须更改突出显示按钮时按钮变为的颜色等。为此，您必须在 CSS 中查找其他标签，例如“.btn:hover{} “， 等等。
Changing it requires changing of the CSS. Here is a quick link to that file:
更改它需要更改 CSS。这是该文件的快速链接：
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
回答by chrisan
I found the simplest way is to put this in your overrides. Sorry for my unimaginative color choice
我发现最简单的方法是把它放在你的覆盖中。抱歉我缺乏想象力的颜色选择
Bootstrap 4-Alpha SASS
Bootstrap 4-Alpha SASS
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
Bootstrap 4 Alpha SASS Example
Bootstrap 3 LESS
引导程序 3 少
.my-btn {
//.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(red; white; blue);
}
Bootstrap 3 SASS
引导程序 3 SASS
.my-btn {
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
}
Bootstrap 2.3 LESS
引导程序 2.3 少
.btn-primary {
//.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.buttonBackground(red, white);
}
Bootstrap 2.3 SASS
引导程序 2.3 SASS
.btn-primary {
//@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
@include buttonBackground(red, white);
}
It will take care of the hover/actives for you
它将为您处理悬停/活动
From the comments, if you want to lighten the button instead of darken when using black (or just want to inverse) you need to extend the class a bit further like so:
根据评论，如果您想在使用黑色（或只想反转）时使按钮变亮而不是变暗，则需要进一步扩展该类，如下所示：
Bootstrap 3 SASS Ligthen
Bootstrap 3 SASS 轻量级
.my-btn {
// @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
$color: #fff;
$background: #000;
$border: #333;
@include button-variant($color, $background, $border);
// override the default darkening with lightening
&:hover,
&:focus,
&.focus,
&:active,
&.active,
.open > &.dropdown-toggle {
color: $color;
background-color: lighten($background, 20%); //10% default
border-color: lighten($border, 22%); // 12% default
}
}
回答by MikeAr
You can overwrite the colors in your css, for example for Danger button:
您可以覆盖 css 中的颜色，例如 Danger 按钮：
.btn-danger { border-color: #[insert color here]; background-color: #[insert color here];
.btn-danger:hover { border-color: #[insert color here]; background-color: #[insert color here]; }
回答by Tran Cuong
Here is a good resource: http://charliepark.org/bootstrap_buttons/
这是一个很好的资源：http: //charliepark.org/bootstrap_buttons/
You can change color and see the effect in action.
您可以更改颜色并查看实际效果。
回答by Lilster
If you are already loading your own custom CSS file after loading bootstrap.css (version 3) you can add these 2 CSS styles to your custom.css and they will override the bootstrap defaults for the default button style.
如果您在加载 bootstrap.css（版本 3）后已经加载了您自己的自定义 CSS 文件，您可以将这 2 个 CSS 样式添加到您的 custom.css 中，它们将覆盖默认按钮样式的引导默认设置。
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open .dropdown-toggle.btn-primary {
background-color: #A6A8C1;
border-color: #31347B;
}
.btn
{
background-color: #9F418F;
border-color: #9F418F;
}
回答by Petri Tuononen
Instead of changing CSS values one by one I would suggest to use LESS.Bootstrap has LESS version on Github: https://github.com/twbs/bootstrap
我建议使用LESS，而不是一个一个地更改 CSS 值。Bootstrap 在 Github 上有 LESS 版本：https: //github.com/twbs/bootstrap
LESS allows you to define variables to change colors which makes it so much more convenient. Define color once and LESS compiles CSS file that changes the values globally. Saves time and effort.
LESS 允许您定义变量来更改颜色，这使它变得更加方便。定义颜色一次，LESS 编译全局更改值的 CSS 文件。节省时间和精力。
回答by Rahul Singh
In order to completely override the bootstrap button styles, you need to override a list of properties. See the below example.
为了完全覆盖引导按钮样式，您需要覆盖属性列表。请参阅以下示例。
.btn-primary, .btn-primary:hover, .btn-primary:focus, .btn-primary.focus,
.btn-primary:active, .btn-primary.active, .btn-primary:visited,
.btn-primary:active:hover, .btn-primary.active:hover{
background-color: #F19425;
color:#fff;
border: none;
outline: none;
}
If you don't use all the listed styles then you will see the default styles at performing actions on button. For example once you click the button and remove mouse pointer from button, you will see the default color visible. Or keep the button pressed you will see default colors. So, I have listed all the pseudo-styles that are to be overridden.
如果您没有使用所有列出的样式，那么您将在对按钮执行操作时看到默认样式。例如，一旦您单击按钮并将鼠标指针从按钮上移开，您将看到默认颜色可见。或者按住按钮，您将看到默认颜色。所以，我列出了所有要覆盖的伪样式。
回答by Ari
For Bootstrap for Sass override it's
对于 Bootstrap for Sass 覆盖它是
.btn-default {
@include button-variant($color, $background, $border);
}
You can see the source for it here: https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6
你可以在这里看到它的来源：https: //github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6
回答by Fred
Here is a very easy and eficient way: add in your CSS your class with the colors you want to apply to your button:
这是一个非常简单有效的方法：在你的 CSS 类中添加你想要应用到按钮的颜色：
.my-btn{
background: #0099cc;
color: #ffffff;
}
.my-btn:hover {
border-color: #C0C0C0;
background-color: #C0C0C0;
}
and add the style to your bootstrap button or link:
并将样式添加到您的引导按钮或链接：
<a href="xxx" class="btn btn-info my-btn">aaa</a>
回答by Bass Jobsen
Or try http://twitterbootstrapbuttons.w3masters.nl/. It creates css for buttons based on html color input. Add the css after the bootstrap css. It provides three styles of buttons (light, dark and spin).
或者尝试http://twitterbootstrapbuttons.w3masters.nl/。它根据 html 颜色输入为按钮创建 css。在 bootstrap css 之后添加 css。它提供了三种样式的按钮（亮、暗和旋转）。
