引導3.navbar切換切換狀態

Question

我使用引導3.0並在移動網站上工作。我試圖弄清楚當導航欄摺疊時如何更改button.navbar-toggle的背景顏色。

基本上我問的是如何在移動設備上顯示「按下」狀態時，打開導航菜單？

Answer 1

嘗試在引導樣式表之後添加此樣式。

<style> 
.navbar-default .navbar-toggle { 
    border-color: #563D7C; 
} 

.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
    background-color: #563D7C; 
} 
</style> 

Answer 2

你還可以嘗試：

.navbar-default .navbar-toggle, 
.navbar-default .navbar-toggle:hover, 
.navbar-default .navbar-toggle:focus { 
background-color: #c0d730; 
} 

Answer 3

我不要:hover喜歡這個造型，因爲在移動設備上沒有:hover。 :focus樣式也不是最佳選擇，因爲當您通過單擊切換關閉導航時，:focus將保持在切換狀態，但用戶不再與導航進行交互。所以這沒有多大意義。

我喜歡用JavaScript設置切換按鈕的類。 Bootstrap有一些事件可以抓住拼合。

$('#myNavigation') 
    .on('shown.bs.collapse', function() { 
    $('#myNavigationToggle').addClass('active') 
    }) 
    .on('hidden.bs.collapse', function() { 
    $('#myNavigationToggle').removeClass('active') 
    }); 

文檔：http://getbootstrap.com/javascript/#collapse-events