Twitter Bootstrap按鈕切換 - 如何使開啓/關閉狀態的顏色對比更明顯

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

在線路209

從bootstrap.js

變化

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

到

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