样式化 twitter 引导按钮
Posted
技术标签:
【中文标题】样式化 twitter 引导按钮【英文标题】：Styling twitter bootstrap buttons 【发布时间】：2012-05-26 09:47:45 【问题描述】：Twitter-Bootstrap 按钮非常漂亮。 Try them out by scrolling over them
但它们的颜色有限。
有什么方法可以改变按钮的基本颜色，同时保持 bootstrap 如此美丽和轻松的美丽悬停效果？
我完全不知道 twitter 使用什么 css/javascript 来维持这些效果。
【问题讨论】：
查找和编辑按钮的较少定义。然后用lessc 重新编译CSS。 不要直接编辑 CSS 文件！它是不可维护的。
【参考方案1】：
您可以更改背景颜色并使用 !important;
.btn-primary
background-color: #003c79 !important;
border-color: #15548b !important;
color: #fff;
.btn-primary:hover
background-color: #4289c6 !important;
border-color: #3877ae !important;
color: #fff;
.btn-primary.focus, .btn-primary:focus
background-color: #4289c6 !important;
border-color: #3877ae !important;
color: #fff;
【讨论】：
【参考方案2】：为了完全覆盖引导按钮样式，您需要覆盖一个属性列表。请参见下面的示例。
.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;
如果您没有使用所有列出的样式，那么您将在按钮上执行操作时看到默认样式。例如，一旦您单击按钮并从按钮上移除鼠标指针，您将看到默认颜色可见。或者按住按钮，您将看到默认颜色。所以，我列出了所有要被覆盖的伪样式。
【讨论】：
这个方法很棒。它仅次于 LESS 引导程序自定义【参考方案3】：我发现最简单的方法是把它放在你的覆盖中。对不起，我没有想象力的颜色选择
引导 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
引导 3 LESS
.my-btn
//.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border);
.button-variant(red; white; blue);
Bootstrap 3 LESS Example
引导 3 SASS
.my-btn
//@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border);
@include button-variant(red, white, blue);
Bootstrap 3 SASS Example
引导 2.3 LESS
.btn-primary
//.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75));
.buttonBackground(red, white);
Bootstrap 2.3 LESS Example
引导 2.3 SASS
.btn-primary
//@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight);
@include buttonBackground(red, white);
它将为您处理悬停/活动
从 cmets 来看，如果您想在使用黑色（或只是想反转）时使按钮变亮而不是变暗，则需要像这样进一步扩展类：
Bootstrap 3 SASS Ligthen
.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
Bootstrap 3 SASS Lighten Example
【讨论】：
你会如何把它翻译成 scss？ 然后运行 lessc 将您的更改编译为 CSS。
我收到 .buttonBackground is undefined in main.less 我需要在我的 less 中包含任何内容吗？
@hmajumdar 确保您首先导入了 bootstrap less 或 sass 框架，然后再添加覆盖。如果你得到buttonBackground undefined，你要么没有框架，要么正在使用旧的2.3，应该切换到button-variant for v3。我添加了一些包含最少文件的 codepen 示例（您可能想要的不仅仅是这些）【参考方案4】：
这是一个非常简单有效的方法： 在你的 CSS 类中添加你想要应用到按钮的颜色：
.my-btn
background: #0099cc;
color: #ffffff;
.my-btn:hover
border-color: #C0C0C0;
background-color: #C0C0C0;
并将样式添加到引导按钮或链接：
<a href="xxx" class="btn btn-info my-btn">aaa</a>
【讨论】：
【参考方案5】：我知道这是一个较旧的线程，但只是为了添加另一个视角。我断言使用覆盖确实有点代码味道，并且在大型项目中很快就会失控。今天你要覆盖 Buttons，明天要覆盖 Modals，第二天要覆盖 Dropdowns，等等。
我建议尝试注释掉 buttons.less 的包含并定义我自己的，或者找到另一个更适合我的项目的按钮库。无耻的插件：这是一个将我们的 Buttons 库与 TB 混合是多么容易的示例：Using Buttons with Twitter Bootstrap。在实践中，您可能希望完全删除 buttons.less 包含以提高性能，但这表明您可以如何让事情看起来不那么“通用”。我自己还没有完成这个练习，但我想你可以从简单地注释掉以下行开始：
https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17
然后使用您自己的按钮模块之一使用 `lessc 重新编译。这样，您就可以获得经过实战考验的 TB 核心，但仍然可以自定义事物而无需诉诸重大覆盖。绝对没有理由不只使用像 Bootstrap 这样的库的一部分。当然这同样适用于 Sass 版本的 TB
【讨论】：
【参考方案6】：对于 Bootstrap（至少对于 3.1.1 版）和 LESS，你可以使用这个：
.btn-my-custom
.button-variant(@color; @background; @border)
这是在bootstrap/less/buttons.less 中定义的。
【讨论】：
【参考方案7】：对于 Sass 的 Bootstrap 覆盖它是
.btn-default
@include button-variant($color, $background, $border);
您可以在此处查看其来源：https://github.com/twbs/bootstrap-sass/blob/a5f5954268779ce0faf7607b3c35191a8d0fdfe6/assets/stylesheets/bootstrap/mixins/_buttons.scss#L6
【讨论】：
【参考方案8】：基本上，Twitter Bootstrap 中的按钮在 CSS 中由“.btn”控制。您需要做的是转到 CSS 文件并找到显示“btn”的位置并更改颜色设置。但是，这并不像这样做那么简单，因为您还必须更改按钮在突出显示时变为什么颜色等。为此，您必须在 CSS 中查找其他标签，例如“.btn:hover "等。
更改它需要更改 CSS。这是该文件的快速链接：
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
【讨论】：
这不是一个特别漂亮的解决方案。请使用基于 LESS 的其他解决方案。或者通过他们网站上的变量编辑器自定义引导程序。 只是覆盖它...最后加载你的css可以帮助你解决问题..使用相同的引导程序 是的，我绝对反对修改 bootstrap.css。就像 Jaimin 说的那样，覆盖它。【参考方案9】：如果您在加载 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;
【讨论】：
【参考方案10】：在Twitter Bootstrap bootstrap 3.0.0 中， Twitter 按钮是扁平的。 您可以从http://getbootstrap.com/customize 对其进行自定义。按钮颜色、边框等。
您还可以找到 html 代码和其他功能 http://twitterbootstrap.org/bootstrap-css-buttons.
Bootstrap 2.3.2 按钮是渐变的，但 3.0.0（新版本）是扁平的，看起来更酷。
您还可以从以下资源中找到自定义整个引导程序外观和样式： http://twitterbootstrap.org/top-5-customizing-bootstrap-resources/
【讨论】：
【参考方案11】：我建议不要一一更改 CSS 值，而是使用 LESS. Bootstrap 在 Github 上有 LESS 版本：https://github.com/twbs/bootstrap
LESS 允许您定义变量以更改颜色，这使其更加方便。定义一次颜色，LESS 编译全局更改值的 CSS 文件。节省时间和精力。
【讨论】：
【参考方案12】：您可以覆盖 CSS 中的颜色，例如危险按钮：
.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];
【讨论】：
我认为您也需要设置:focus 和:active 的样式，否则有时您在点击/拖动时会出现奇怪的颜色...
简单，我喜欢。
对于那些通过搜索找到它的人，并且当您单击并拖动按钮时会获得默认颜色，您需要.btn-primary:active:focus 才能选择并覆盖该案例【参考方案13】：
这是一个很好的资源：@987654321@
您可以更改颜色并查看实际效果。
【讨论】：
这是一个配置器。如果您急于为客户创建原型，这很容易。但是长期无法维护。如果配置器消失了怎么办？因此对于真实的东西，lessc 是一个更好的解决方案。
喜欢这个解决方案，虽然我希望有一种方法可以输入 rgb/rgba 以获得准确的颜色。
@nalply less 如果您已经完成了这一步，那就太好了，但是这个“配置器”可以完成生成 css 所需的一切。把它扔进去然后走。之后你就不需要配置器了。【参考方案14】：
或者试试http://twitterbootstrapbuttons.w3masters.nl/。它基于 html 颜色输入为按钮创建 css。在引导 css 之后添加 css。它提供了三种样式的按钮（浅色、深色和旋转）。
【讨论】：
这是一个配置器（有点）。如果您急于为客户创建原型，这很容易。但是长期无法维护。如果配置器消失了怎么办？因此对于真实的东西，lessc 是一个更好的解决方案。以上是关于样式化 twitter 引导按钮的主要内容，如果未能解决你的问题，请参考以下文章
带有 <image>( X ) 标签的 simple_form 渲染单选按钮组与 twitter 引导程序？