如何更改 Bootstrap 4 導覽列切換按鈕顏色？

自訂Bootstrap 4 導覽列切換按鈕顏色

上下文：

上下文：

上下文中，較小螢幕通常具有用於導航的漢堡選單按鈕。預設情況下，此按鈕具有特定顏色。

問題：

您可以修改 Bootstrap 4 導覽列切換按鈕的顏色嗎？

答案：

使用Bootstrap 的預定義樣式：
• Bootstrap 4 使用 SVG 背景圖像作為切換圖標。不同樣式有特定的類別：

.navbar-dark：深色背景上的淺色圖示.navbar-light：淺色背景上的深色圖示

.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");
}

自訂圖示：

如果這些預訂選項無法滿足您的需求，您可以使用所需的顏色建立自訂 SVG 圖示。例如：

此程式碼將圖示顏色設定為粉紅色。您可以調整 rgba() 函數中的值以符合您喜歡的顏色。

使用外部圖示庫：

或者，您可以使用Font 等庫中的圖示太棒了，確保您應用必要的CSS 類別來設定它們的樣式。

Bootstrap 中的更新4.0.0:以前稱為navbar-inverse，深色主題的導航欄類現在為navbar-dark，它為連結和切換按鈕產生較淺的顏色。

以上是如何更改 Bootstrap 4 導覽列切換按鈕顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！