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

【问题标题】：Twitter Bootstrap button toggle - How to make on/off state color contrast more obviousTwitter Bootstrap 按钮切换 - 如何使开/关状态颜色对比更加明显
【发布时间】：2012-12-03 05:17:03
【问题描述】：

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

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

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

谢谢。

【问题讨论】：

标签： button twitter-bootstrap colors toggle

【解决方案1】：

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

bootstrap-3.1.1

在第 209 行来自bootstrap.js

改变

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

到

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

【讨论】：

很好的解决方法哥们，但最好不要更改引导程序的本机源代码。无论如何，如果这是一个可以忍受的问题，这是一个很好的解决方案。谢谢！

【解决方案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');

 }

});

});

【讨论】：