使用 bootstrap 激活时如何更改按钮颜色？

Question

我正在使用 bootstrap 3. 我想在单击时更改按钮颜色 button.I 意味着按钮在被选中时应该是不同的颜色。我如何使用 css 来做到这一点？

我的代码是：

<div class="col-sm-12" id="">
    <button type="submit" class="btn btn-warning" id="1">Button1</button>
    <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

Answer 1

CSS 有不同的伪选择器可以达到这样的效果。在您的情况下，您可以使用

:active : if you want background color only when the button is clicked and don't want to persist.

:focus: if you want background color untill the focus is on the button.

button:active{
    background:olive;
}

和

button:focus{
    background:olive;
}

JsFiddle Example

P.S.: 请不要在 html 元素的 Id 属性中给出数字。

Answer 2

HTML--

<div class="col-sm-12" id="my_styles">
   <button type="submit" class="btn btn-warning" id="1">Button1</button>
   <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

css--

.active{
         background:red;
    }
 button.btn:active{
     background:red;
 }

jQuery--

jQuery("#my_styles .btn").click(function(){
    jQuery("#my_styles .btn").removeClass('active');
    jQuery(this).toggleClass('active');

});

在 jsfiddle

上观看现场演示

Answer 3

CSS有很多伪选择器，比如:active, :hover, :focus，所以你可以使用。

Html

<div class="col-sm-12" id="my_styles">
     <button type="submit" class="btn btn-warning" id="1">Button1</button>
     <button type="submit" class="btn btn-warning" id="2">Button2</button>
</div>

css

.btn{
    background: #ccc;
} .btn:focus{
    background: red;
}

JsFiddle

使用 bootstrap 激活时如何更改按钮颜色？

How to change the button color when it is active using bootstrap?

css

twitter-bootstrap

twitter-bootstrap-3