造型twitter引导button
Twitter-Bootstrapbutton非常漂亮。 通过滚动它们来尝试它们
但是他们的颜色有限。
有没有什么办法可以改变button的基本颜色，同时保持漂亮的hover效果，引导使得如此美丽和轻松？
我完全不知道css / javascript看起来像twitter用来维护这些效果。
基本上，Twitter Bootstrap中的button在CSS中由“.btn {}”控制。 你必须做的是去CSS文件，并find它说的“btn”，并改变颜色设置。 但是，这样做并不简单，因为当你突出显示button时，你也必须改变button变成什么颜色，等等。要做到这一点，你必须在CSS中寻找其他标签，如“.btn：hover {} “等等
改变它需要改变CSS。 这是一个到该文件的快速链接：
https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
我发现最简单的方法是把这个放在你的覆盖。 对不起，我缺乏想象力的颜色select
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示例
Bootstrap 3 LESS
.my-btn { //.button-variant(@btn-primary-color; @btn-primary-bg; @btn-primary-border); .button-variant(red; white; blue); }
Bootstrap 3 LESS示例
Bootstrap 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示例
Bootstrap 2.3 LESS
.btn-primary { //.buttonBackground(@btnBackground, @btnBackgroundHighlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); .buttonBackground(red, white); }
Bootstrap 2.3 LESS示例
Bootstrap 2.3 SASS
.btn-primary { //@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); @include buttonBackground(red, white); }
它会照顾你的hover/活动
从评论中，如果你想要减轻button，而不是在使用黑色时变暗（或者只是想反转），你需要进一步扩展类如下：
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示例
你可以覆盖你的CSS的颜色，例如“危险”button：
.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]; }
这是一个很好的资源： http : //charliepark.org/bootstrap_buttons/
您可以更改颜色并查看效果。
如果您在加载bootstrap.css（版本3）后已经加载了您自己的自定义CSS文件，则可以将这两种CSS样式添加到custom.css中，并且它们将覆盖默认button样式的引导默认值。
.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; }
我不build议逐个更改CSS值，而应该使用LESS。 Bootstrap在Github上的版本较低： https ： //github.com/twbs/bootstrap
LESS允许你定义variables来改变颜色，这使得它更方便。 定义颜色一次，LESS编译全局更改值的CSS文件。 节省时间和精力。
为了完全覆盖引导button样式，您需要覆盖属性列表。 看下面的例子。
.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; }
如果您不使用所有列出的样式，则会在button上执行操作时看到默认样式。 例如，一旦您单击button并从button上移除鼠标指针，您将看到可见的默认颜色。 或保持button按下，你会看到默认的颜色。 所以，我列出了所有将被覆盖的伪types。
对于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
或者尝试http://twitterbootstrapbuttons.w3masters.nl/ 。 它创build基于html颜色input的button的CSS。 在引导CSS后添加CSS。 它提供了三种风格的button（光，黑和旋转）。
这是一个非常简单和有效的方法：用你想要应用到你的button的颜色添加你的CSS：
.my-btn{ background: #0099cc; color: #ffffff; } .my-btn:hover { border-color: #C0C0C0; background-color: #C0C0C0; }
并将样式添加到引导button或链接：
<a href="xxx" class="btn btn-info my-btn">aaa</a>
在Twitter Bootstrap bootstrap 3.0.0中，Twitterbutton是平坦的。 您可以从http://getbootstrap.com/customize自定义它。; button颜色，边框辐射等
你也可以findHTML代码和其他functionhttp://twitterbootstrap.org/bootstrap-css-buttons 。
引导2.3.2button是渐变，但3.0.0（新版本）平坦，看起来更酷。
也可以从这些资源中find自定义引导程序的外观和样式： http : //twitterbootstrap.org/top-5-customizing-bootstrap-resources/
我知道这是一个较旧的线程，但只是添加另一个angular度。 我认为使用覆盖是一种代码味道，并且很快就会在大型项目中失控。 今天你压倒button，明天莫代尔，第二天它Dropdowns等等
我build议尝试可能的注释包括buttons.less和要么定义我自己的，或者，find更适合我的项目的另一个button库。 无耻的插件：下面是一个例子，说明如何轻松地将我们的button库与TB结合起来： 将button与Twitter Bootstrap一起使用 。 在实践中，再次，你可能想要删除buttons.less包括完全提高性能，但这显示了如何使事情看起来不那么“通用”。 我自己还没有做过这个练习，但是我想你可以先简单地评论一下这样的行：
https://github.com/twbs/bootstrap/blob/master/less/bootstrap.less#L17
然后使用`lessc使用你自己的button模块重新编译。 这样你就可以得到TB的核心testing核心，但仍可以定制的东西，而不诉诸大的覆盖。 绝对没有理由不使用像Bootstrap这样的库。 当然这同样适用于Sass的TB版本
对于Bootstrap（至less在版本3.1.1）和LESS，你可以使用这个：
.btn-my-custom { .button-variant(@color; @background; @border) }
这是在bootstrap/less/buttons.less定义的。
您可以更改背景颜色并使用！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; }
