button - Twitter Bootstrap 按钮切换 - 如何使开/关状态颜色对比更明显

Question

我正在使用 Twitter Bootstrap 的按钮切换功能。一切都很完美。问题是切换开关的开/关状态之间的颜色差异太相似了。很难看出开启和关闭状态之间的区别。

理想情况下，我想让开/关状态之间的颜色对比更加明显，或者完全改变状态之间的颜色（例如蓝色=关闭，红色=打开）。

<button type='button' class='btn' data-toggle='button' value='ABC'><i class='icon-star-empty'></i></button>

谢谢。

Answer 1

最近也遇到了这个问题。找到了一个快速的解决方案

引导程序-3.1.1

在第 209 行从bootstrap.js

改变

if (changed) this.$element.toggleClass('active')

至

if (changed) this.$element.toggleClass('btn-success')

Answer 2

我意识到我可以使用 JQuery 更改课程。现在关闭状态为白色，开启状态为绿色。

 $(document).ready(function() {

 $('.keyContactToggle').click(function (e) {

   var UserID = $(this).attr('value');

 if ( ($(this).is('.btn')) && ($(this).is('.keyContactToggle')) && !($(this).is('.btn-success')) ) {

   $(this).addClass('btn-success');


 } else {

   $(this).removeClass('btn-success');

 }

});

});