CSS 设计 Twitter 的 Bootstrap 3.x 按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17128904/
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's Bootstrap 3.x Buttons
提问by Bass Jobsen
Twitter's Bootstrap 3buttons are limited in colors. By default there will be 57 colors (default primary, error, warning, info, success and link) See:
Twitter 的 Bootstrap 3按钮颜色有限。默认情况下会有57 种颜色（默认主要、错误、警告、信息、成功和链接）见：
Every button got 3 state (default, active and disabled)
每个按钮都有 3 个状态（默认、活动和禁用）
How to add more colors or create custom buttons? This question is already answered for Twitter's Bootstrap 2.x: Styling twitter bootstrap buttons. Bootstrap 3 is not backwards compatible. There will be lot of changes in the less and css files. Support for IE7 will be dropped. TB3 is mobile first. Markup codes will be changed too.
如何添加更多颜色或创建自定义按钮？Twitter 的 Bootstrap 2.x: Styling twitter bootstrap buttons已经回答了这个问题。Bootstrap 3 不向后兼容。less 和 css 文件会有很多变化。将取消对 IE7 的支持。TB3首先是移动的。标记代码也将更改。
回答by Bass Jobsen
Add extra colors to your less files and recompile. Also see Twitter Bootstrap Customization Best Practices. update
为您的 less 文件添加额外的颜色并重新编译。另请参阅Twitter Bootstrap 自定义最佳实践。 更新
As mentioned by @ow3n since v3.0.3 use:
正如@ow3n 所提到的，自 v3.0.3 以来使用：
.btn-custom {
.button-variant(@btn-default-color; @btn-default-bg; @btn-default-border);
}
Note in the above @btn-default-colorsets the font color,@btn-default-bgthe background color and @btn-default-border the color of the border. Colors for states like active, hover and disabled are calculated based on of these parameters.
注意上面@btn-default-color设置了字体颜色、@btn-default-bg背景颜色和@btn-default-border 边框的颜色。活动、悬停和禁用等状态的颜色是根据这些参数计算的。
For example:
例如：
.btn-custom {
.button-variant(blue; red; green);
}
will result in:
将导致：
For who want to use the CSS direct, replace the colors in this code:
对于想直接使用 CSS 的人，请替换此代码中的颜色：
.btn-custom {
color: #0000ff;
background-color: #ff0000;
border-color: #008000;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
color: #0000ff;
background-color: #d60000;
border-color: #004300;
}
.btn-custom:active,
.btn-custom.active,
.open .dropdown-toggle.btn-custom {
background-image: none;
}
.btn-custom.disabled,
.btn-custom[disabled],
fieldset[disabled] .btn-custom,
.btn-custom.disabled:hover,
.btn-custom[disabled]:hover,
fieldset[disabled] .btn-custom:hover,
.btn-custom.disabled:focus,
.btn-custom[disabled]:focus,
fieldset[disabled] .btn-custom:focus,
.btn-custom.disabled:active,
.btn-custom[disabled]:active,
fieldset[disabled] .btn-custom:active,
.btn-custom.disabled.active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom.active {
background-color: #ff0000;
border-color: #008000;
}
.btn-custom .badge {
color: #ff0000;
background-color: #0000ff;
}
end update
结束更新
To generate a custom button:
生成自定义按钮：
.btn-custom {
.btn-pseudo-states(@yourColor, @yourColorDarker);
}
The above will generate the following css:
以上将生成以下css：
.btn-custom {
background-color: #1dcc00;
border-color: #1dcc00;
}
.btn-custom:hover,
.btn-custom:focus,
.btn-custom:active,
.btn-custom.active {
background-color: #19b300;
border-color: #169900;
}
.btn-custom.disabled:hover,
.btn-custom.disabled:focus,
.btn-custom.disabled:active,
.btn-custom.disabled.active,
.btn-custom[disabled]:hover,
.btn-custom[disabled]:focus,
.btn-custom[disabled]:active,
.btn-custom[disabled].active,
fieldset[disabled] .btn-custom:hover,
fieldset[disabled] .btn-custom:focus,
fieldset[disabled] .btn-custom:active,
fieldset[disabled] .btn-custom.active {
background-color: #1dcc00;
border-color: #1dcc00;
}
In the above #1dcc00 will be your custom color and #19b300 your darker color. In stead of the less solution you also can add this css direct to your html files (after the bootstrap css).
在上面#1dcc00 将是您的自定义颜色，#19b300 将是您的较深颜色。您还可以将此 css 直接添加到您的 html 文件中（在引导 css 之后），而不是使用 less 解决方案。
Or get your css code direct from Twitter's Bootstrap 3 Button Generator
或者直接从Twitter 的 Bootstrap 3 Button Generator获取你的 css 代码
回答by Matt Lambert
It's quite easy to do this with unprocessed css as well
使用未处理的 css 也很容易做到这一点
CSS
CSS
.btn-purple {
background: #9b59b6;
border-color: #9b59b6;
}
.btn-purple:hover {
background: #8e44ad;
border-color: #8e44ad;
}
.btn-teal {
background: #1abc9c;
border-color: #1abc9c;
}
.btn-teal:hover {
background: #16a085;
border-color: #16a085;
}
HTML
HTML
<button class="btn btn-purple">purple</button>
<button class="btn btn-teal">teal</button>
Fiddle at: http://jsfiddle.net/z7hV6/
回答by Onimusha
After finding this solution via google and understanding the bootstrap buttons better I found the following tool to generate different colours for bootstrap buttons.
通过谷歌找到这个解决方案并更好地理解引导按钮后，我找到了以下工具来为引导按钮生成不同的颜色。
It does mean you'll have to add this to a separate css but it's perfect for what I needed. Here's hoping it's useful to others:
这确实意味着您必须将其添加到单独的 css 中，但它非常适合我的需要。这里希望它对其他人有用：
回答by Homer
Here is a nice and easy way to style up additional Bootstrap button colors
这是一种设置其他 Bootstrap 按钮颜色样式的好方法
Below is a sample of the CSS it will generate:
下面是它将生成的 CSS 示例：
.btn-sample {
color: #ffffff;
background-color: #611BBD;
border-color: #130269;
}
.btn-sample:hover,
.btn-sample:focus,
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
color: #ffffff;
background-color: #49247A;
border-color: #130269;
}
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
background-image: none;
}
.btn-sample.disabled,
.btn-sample[disabled],
fieldset[disabled] .btn-sample,
.btn-sample.disabled:hover,
.btn-sample[disabled]:hover,
fieldset[disabled] .btn-sample:hover,
.btn-sample.disabled:focus,
.btn-sample[disabled]:focus,
fieldset[disabled] .btn-sample:focus,
.btn-sample.disabled:active,
.btn-sample[disabled]:active,
fieldset[disabled] .btn-sample:active,
.btn-sample.disabled.active,
.btn-sample[disabled].active,
fieldset[disabled] .btn-sample.active {
background-color: #611BBD;
border-color: #130269;
}
.btn-sample .badge {
color: #611BBD;
background-color: #ffffff;
}
回答by SrishAkaTux
I have been looking for a possible solution for quite a while to stylize bootstrap buttons. I followed the latest css style language (less http://lesscss.org/), and quite a few workarounds to customize the buttons, but none of them were useful. There are quite amazing bootstrap button generators available online such as http://www.plugolabs.com/twitter-bootstrap-button-generator/and many more. But to my surprise meagerly one line of code in the css file worked decently well for me. (Note: Instead of "background-color", I have used "background" as parameter to specify the name of the button color. In the html code, I have used btn-custom as the class name which I have redefined in the css file.)
很长一段时间以来，我一直在寻找一种可能的解决方案来风格化引导按钮。我遵循了最新的 css 样式语言（较少http://lesscss.org/），以及很多自定义按钮的解决方法，但它们都没有用。网上有很多很棒的引导按钮生成器，例如http://www.plugolabs.com/twitter-bootstrap-button-generator/等等。但令我惊讶的是，css 文件中的一行代码对我来说效果很好。（注意：我没有使用“background-color”，而是使用“background”作为参数来指定按钮颜色的名称。在html代码中，我使用了btn-custom作为我在css中重新定义的类名文件。）
HTML Code
HTML代码
<a href="#" target="_blank" class="btn btn-custom pull-right">
<i class="fa fa-edit fa-lg"></i>
Create an Event
</a>
CSS Code
CSS 代码
.btn-custom {
background: #colorname;
}
回答by Rob
Here's another alternative with the advantage that you can add as many "button actions" (colors) as you want. Here's short demo video: Using Unicorn-UI Buttons with Twitter Bootstrap
这是另一种选择，其优点是您可以根据需要添加任意数量的“按钮操作”（颜色）。这是简短的演示视频：在 Twitter Bootstrap 中使用 Unicorn-UI 按钮
If you grab the library and compile yourself, you can defined as many "button actions" by editing a Sass list that looks like:
如果您获取库并自己编译，您可以通过编辑如下所示的 Sass 列表来定义许多“按钮操作”：
$ubtn-colors: ('primary' #1B9AF7 #FFF) ('plain' #FFF #1B9AF7) ('inverse' #222 #EEE) ('action' #A5DE37 #FFF) ('highlight' #FEAE1B #FFF)('caution' #FF4351 #FFF) ('royal' #7B72E9 #FFF) !default;
Adding as many custom types as you'd like (and of course also removing those you don't need).
添加任意数量的自定义类型（当然也可以删除不需要的自定义类型）。
