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

Question

我正在使用Twitter Bootstrap的按钮切换功能。一切都运作良好。问题在于，开关状态之间的颜色差异太相似了。很难看出开和关的状态之间的区别。

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

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

感谢您的选择。

- Jeremy

Answer 1

最近也遇到了这个问题。

找到了一个快速的解决方案。

使用的是bootstrap-3.1.1版本。

在bootstrap.js的第209行：

将原来的代码改为：

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

to

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

- user1451334

---

不错的解决方案，伙计。但最好不要改变Bootstrap的原生源代码。无论如何，如果这是一个可以忍受的问题，那么这个解决方案就很好了。谢谢！ - Nuno Prata

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');

 }

});

}); 

- Jeremy