引導程序4更改漢堡Toggler顏色

我有一個引導程序網站，其中Hamburger是在屏幕小於992px時添加的。漢堡代碼是像這樣引導程序4更改漢堡Toggler顏色

<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>

是否有可能改變漢堡包按鈕的顏色？

來源

2017-03-03 Rehan

代碼不是運行在bootply –

Bootstrap 4中的navbar-toggler-icon（漢堡包）使用SVG background-image。有2個「版本」的觸發器圖標圖像。一個用於導航欄光，以及一個用於暗（逆）導航欄...

// this is a black icon with 50% opacity 
.navbar-light .navbar-toggler-icon { 
    background-image: url("data:image/svg+xml;.."); 
} 
// this is a white icon with 50% opacity 
.navbar-inverse .navbar-toggler-icon { 
    background-image: url("data:image/svg+xml;.."); 
}

所以，如果你想這個圖像的顏色更改爲別的東西，你可以自定義圖標。例如，在這裏，我將RGB值設置爲粉紅色（255,102,203）。注意在SVG數據的stroke='rgba(255,102,203, 0.5)'值：

.custom-toggler .navbar-toggler-icon { 
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,102,203, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E"); 
} 

.custom-toggler.navbar-toggler { 
    border-color: rgb(255,102,203); 
}

演示http://www.codeply.com/go/4FdZGlPMNV

OFC，另一個選擇只使用來自另一個庫，即一個圖標：字體真棒，等等。

Update Bootstrap 4.0.0：

從Bootstrap 4 Beta開始，navbar-inverse現在爲navbar-dark，可用於背景顏色較深的導航欄以產生較輕的鏈接和切換顏色。

來源

2017-03-03 20:14:33 ZimSystem

你是一個生命的救星人:)謝謝！ – Rehan

在Bootstrap 4 beta 1中沒有'.navbar-inverse'類。你可以從兩個類中選擇：'.navbar-light'或'.navbar-dark'。 – Qrzysio

如果你自舉的上海社會科學院版本_variables.scss工作，你可以找到$navbar-inverse-toggler-bg或$navbar-light-toggler-bg在那裏你可以改變你的切換按鈕的顏色和樣式。

在HTML中，你必須使用navbar-inverse或navbar-light這取決於你想使用哪個版本。

來源

2017-08-23 13:07:19 nedeco

在引導程序4中不適用於導航燈 – botbot

如果我希望使用Font Awesome來替換Bootstrap v4.0的.navbar-toggler-icon，我會在圖元中插入圖標代碼嗎？像這樣：

<span class="navbar-toggler-icon"><i class="fa fa-bars" aria-hidden="true"></i></span>

或者只是本身？

<button ...><i class="fa fa-bars" aria-hidden="true"></i></button>

來源

2017-09-05 21:29:17

對於Font-Awesome，您只需使用該元素而不包含任何其他類。如果您嘗試添加額外的類，則會導致字體中斷。因此，您提供的兩個示例應該都可以正常工作 - 因爲「」或「」被其他元素包圍。 – Samuel

+1

謝謝！發佈這個問題後，我想了幾個小時。然後我必須弄清楚如何改變顏色，方法是將我的.navbar-toggler添加到其他元素中，這些元素使我的.bg-custom覆蓋光線或反色。 –

0

工程上[email protected]以及

嘗試這樣的，它的工作100％嘗試改變行程='RGBA（184，153，129，0 。5）」去第一bootstrap.min.css

找到這個CSS .navbar-dark .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(184, 153, 129, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") }

嘗試改變stroke='rgba(184, 153, 129, 0.5)'

來源

2017-11-23 13:25:42 core114

引導程序4更改漢堡Toggler顏色

回答

相關問題