Question

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

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

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

感谢。

Answer 1

我意识到我可以使用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');

 }

});

});

Answer 2

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

自举-3.1.1

来自bootstrap.js

的第209行

更改

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

到

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

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

2 个答案: