设置twitter自举按钮

Question

Twitter-Bootstrap按钮非常漂亮.通过滚动它们来尝试它们

但它们的颜色有限.

有没有什么方法可以改变按钮的基色,同时保持引导程序如此美丽和轻松的漂亮的悬停效果？

我完全不知道twitter用来维护这些效果的css/javascript是什么样的.

Answer 1

我发现最简单的方法是将它放在你的覆盖中.对不起我的缺乏想象力的颜色选择

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少

.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); 
}

它将为您处理悬停/活动

从评论中,如果你想要使用黑色(或者只是想反向)来减轻按钮而不是变暗,你需要进一步扩展类,如下所示:

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增亮示例

Answer 2

您可以覆盖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]; }

Answer 3

这是一个很好的资源:http://charliepark.org/bootstrap_buttons/

您可以更改颜色并查看效果.

Answer 4

基本上,Twitter Bootstrap中的按钮由CSS控制为".btn {}".你要做的是转到CSS文件并找到它所说的"btn"并更改颜色设置.然而,它并不像那样简单,因为当你突出显示它时,你还必须改变按钮变成的颜色等.要做到这一点,你必须在CSS中寻找其他标签,如".btn:hover {} "等

更改它需要更改CSS.这是该文件的快速链接:

https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css

Answer 5

如果您在加载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;
}

Answer 6

我建议使用LESS,而不是逐个更改CSS值.Bootstrap在Github上有LESS版本:https://github.com/twbs/bootstrap

LESS允许您定义变量以更改颜色,这使得它更方便.定义颜色一次,LESS编译CSS文件,全局更改值.节省时间和精力.

Answer 7

要完全覆盖引导按钮样式,您需要覆盖属性列表.请参阅以下示例.

    .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;
    }

如果您不使用所有列出的样式,那么您将在按钮上执行操作时看到默认样式.例如,单击按钮并从按钮中删除鼠标指针后,您将看到默认颜色可见.或者按住按钮,您将看到默认颜色.所以,我列出了所有要覆盖的伪样式.

Answer 8

对于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

Answer 9

或者尝试http://twitterbootstrapbuttons.w3masters.nl/.它根据html颜色输入创建按钮的CSS.在bootstrap css之后添加css.它提供三种类型的按钮(浅色,深色和旋转).

Answer 10

这是一种非常简单有效的方法:在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>